/* Flowchart, aligned to the design system.

   The reference this grew from was neumorphic: 32px radii, four-layer shadows,
   a glass badge and eleven custom hues. MASTER.md forbids all of it — square
   corners, thin rules, shadows and gradients not used as decoration, blue as
   the only accent. This file now owns the card's layout and surface outright,
   so the .clay-element class is no longer applied in the markup.

   Each card renders five zones: index, verb, title, outcome, tags. The outcome
   line occupies what used to be the image block; only the two bracket cards
   carry a photograph, which is why only they keep a media layer. */

.flowchart-section { background: var(--blue-tint); }
.flow-art { position: relative; width: 3500px; height: 1000px; }

/* At scroll zero the canvas shows the first card and the DEFINE column and
   nothing further. Derived from the viewport: enough to push column two (left
   edge 1595px) past the right edge, plus a 40px margin. The canvas grows by
   the same amount so the scrub still covers the full flow. */
.flow-enhanced { --flow-offset: max(0px, calc(100vw - 1555px)); }
.flow-enhanced .canvas { width: calc(3500px + var(--flow-offset)); height: 1000px; }
.flow-enhanced .flow-art { margin-left: var(--flow-offset); }

/* --- Card surface ------------------------------------------------------- */

.flow-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 250px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  transform: translate(-50%, -50%);
  transition: none;
}

/* The reference lifted the card on hover; it assumed the old centring offset
   and reintroduced a decorative shadow. */
.flow-card:hover { transform: translate(-50%, -50%); box-shadow: none; z-index: 2; }

.flow-card > * { position: relative; z-index: 1; }

/* --- Zones -------------------------------------------------------------- */

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.card-index {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

.flow-action {
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.flow-card .title {
  position: static;
  z-index: auto;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: left;
  text-shadow: none;
}

/* The payoff, and the reason the image block was given up. */
.flow-outcome {
  flex: 1;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  opacity: .88;
}

.flow-card .card-stats {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  margin-top: 12px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.flow-card .card-stats span:not(:first-child)::before {
  content: "·";
  margin: 0 7px;
  opacity: .6;
}

/* --- The two bracket cards ---------------------------------------------- */

/* Blue marks both ends of the flow. They are the only cards that take a
   photograph: a real one, full bleed, behind a dark overlay. Until artwork
   arrives the media layer shows the page's own technical grid. */
.flow-card--core,
.flow-card--goal { border-color: var(--blue); background: var(--blue); }

.flow-card--core .title,
.flow-card--goal .title,
.flow-card--core .flow-outcome,
.flow-card--goal .flow-outcome,
.flow-card--core .card-index,
.flow-card--goal .card-index,
.flow-card--core .card-stats,
.flow-card--goal .card-stats { color: var(--paper); }

/* Paper at 80% measured 3.54:1 on blue, so these stay at full strength. */
.flow-card--core .flow-outcome,
.flow-card--goal .flow-outcome { opacity: 1; }

.flow-card--core .flow-action,
.flow-card--goal .flow-action { background: var(--paper); color: var(--ink); }

.card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .09) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .09) 31px 32px);
  background-size: cover;
  background-position: center;
}

/* A 25% scrim holds paper text at 7.2:1 over a photograph. */
.card-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }

/* --- Canvas furniture --------------------------------------------------- */

.line-path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }

.connector-dot {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.flow-row-title { font: 600 12px/1.2 Plex, Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.flow-stage-mobile { display: none; }
.flow-enhanced .flow-columns { position: absolute; left: 995px; top: calc(500px - var(--flow-row-step) - var(--flow-card-height) / 2 - 36px); display: grid; grid-template-columns: repeat(3,250px); gap: 350px; text-align: center; color: var(--muted); font: 600 14px/1 Plex, Arial, sans-serif; letter-spacing: .12em; }
.flow-row { --flow-row: 0; }
.flow-row--design { --flow-row: -1; }
.flow-row--digital { --flow-row: 1; }
.flow-enhanced .flow-row-title { position: absolute; left: 995px; top: calc(500px + var(--flow-row) * var(--flow-row-step) - var(--flow-card-height) / 2 - 16px); margin: 0; }
.flow-enhanced .flow-card { left: calc(520px + var(--flow-column) * 600px); top: calc(500px + var(--flow-row, 0) * var(--flow-row-step)); height: var(--flow-card-height); }
.flow-enhanced .flow-connector { top: calc(500px + var(--flow-row) * var(--flow-row-step)); }

.scroll-instruction {
  font: 600 12px/1 Plex, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* --- Native reading order when motion is disabled or space is limited --- */

html:not(.flow-enhanced) .scroll-wrapper { width: 100%; height: auto; overflow: visible; padding: 48px var(--gutter); }
html:not(.flow-enhanced) .canvas { position: relative; top: auto; transform: none !important; width: min(100%, 1280px); height: auto; margin: auto; }
html:not(.flow-enhanced) .flow-art { width: 100%; height: auto; }
html:not(.flow-enhanced) .lines-layer, html:not(.flow-enhanced) .flow-columns, html:not(.flow-enhanced) .flow-connector { display: none; }
html:not(.flow-enhanced) .scroll-instruction { position: static; transform: none; animation: none; text-align: center; margin-bottom: 40px; }
html:not(.flow-enhanced) .flow-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-block: 48px; }
html:not(.flow-enhanced) .flow-row-title { grid-column: 1 / -1; }
html:not(.flow-enhanced) .flow-card { position: relative; width: 100%; max-width: 340px; min-height: 250px; height: auto; margin-inline: auto; transform: none !important; }
/* Without the pinned canvas the column headings are hidden, so each card
   states its own stage, in the head strip between the index and the verb. */
html:not(.flow-enhanced) .flow-stage-mobile { display: block; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
html:not(.flow-enhanced) .flow-card--core .flow-stage-mobile,
html:not(.flow-enhanced) .flow-card--goal .flow-stage-mobile { color: var(--paper); }
@media (max-width: 760px) {
  html:not(.flow-enhanced) .flow-row { grid-template-columns: 1fr; gap: 28px; }
}

/* On a short desktop the card drops to about 185px and the outcome line had
   exactly zero slack: three lines needing 61px in 61px of space. A different
   font fallback or a browser zoom would have pushed a fourth line out of the
   card. Reclaim the spacing and shorten the leading, which buys a full extra
   line of tolerance while keeping every size at or above the 12px floor. */
@media (min-height: 700px) and (max-height: 830px) and (min-width: 1000px) and (pointer: fine) {
  .flow-enhanced .flow-card { padding: 12px; }
  .flow-enhanced .flow-card .title { margin-top: 10px; font-size: 16px; }
  .flow-enhanced .flow-outcome { margin-top: 8px; font-size: 13px; }
  .flow-enhanced .flow-card .card-stats { margin-top: 8px; }
}

/* Nothing may spill past the card's rule, whatever the text does. */
.flow-card { overflow: hidden; }

/* Tightest band of all. Four more pixels take the worst case from 0.9 to a
   full spare line, which is the threshold that matters: a font fallback that
   breaks the sentence differently must not be able to clip it. */
@media (min-height: 700px) and (max-height: 760px) and (min-width: 1000px) and (pointer: fine) {
  .flow-enhanced .flow-card .title { margin-top: 8px; }
  .flow-enhanced .flow-card .card-stats { margin-top: 6px; }
}