/* Trial (2026-09-30): the eight-step method as a flowchart, in place of the
   process cards. Phase lanes on the left, one spine of steps, step 04 as the
   decision gate, and a dashed loop from 08 back to 01.
   Delete this file, its <link> and the .flow markup to drop the trial;
   ?process=cards shows the cards instead. */

.flow { max-width: calc(50% - var(--gutter)); }
html:not(.proc-cards) .cards,
html.proc-cards .flow { display: none; }

/* ─── Grid: lane label | loop | step box | note ─────────────────────── */
.fc {
    --bw: 196px;   /* step box column */
    --bh: 50px;    /* step box height */
    --dw: 170px;   /* diamond */
    --dh: 76px;
    --cg: 18px;    /* box to note */
    --rg: 30px;    /* between steps */
    position: relative; display: grid;
    grid-template-columns: 96px 22px var(--bw) minmax(0, 1fr); row-gap: var(--rg);
}
.flow-chart { display: contents; list-style: none; }
.flow-chart > li {
    position: relative; z-index: 1; grid-column: 3 / 5;
    display: grid; grid-template-columns: var(--bw) minmax(0, 1fr); column-gap: var(--cg); align-items: start;
}
.flow-chart > li:nth-child(1) { grid-row: 1; } .flow-chart > li:nth-child(2) { grid-row: 2; }
.flow-chart > li:nth-child(3) { grid-row: 3; } .flow-chart > li:nth-child(4) { grid-row: 4; }
.flow-chart > li:nth-child(5) { grid-row: 5; } .flow-chart > li:nth-child(6) { grid-row: 6; }
.flow-chart > li:nth-child(7) { grid-row: 7; } .flow-chart > li:nth-child(8) { grid-row: 8; }

/* Lanes: a rule half a gap above their first step, the label under it. */
.fc-band { grid-column: 1 / -1; margin-top: calc(var(--rg) / -2); border-top: 1px solid var(--line); pointer-events: none; }
.fc-band span { display: block; padding-top: 8px; font-size: 10px; letter-spacing: .08em; color: var(--dim); }
.fc-b1 { grid-row: 1 / 4; margin-top: 0; border-top: 0; }
.fc-b1 span { padding-top: 0; }
.fc-b2 { grid-row: 4 / 7; }
.fc-b3 { grid-row: 7 / 9; }

/* One spine from the middle of 01 to the middle of 08; the boxes cover it. */
.fc-spine { grid-column: 3; grid-row: 1 / 9; justify-self: center; width: 1px; margin: calc(var(--bh) / 2) 0; background: var(--line); }

/* ─── Steps ─────────────────────────────────────────────────────────── */
.fc-box {
    position: relative; height: var(--bh); display: flex; align-items: center; gap: 12px; padding: 0 14px;
    border: 1px solid var(--line); background: var(--bg);
}
.fc-box .mono { color: var(--accent); }
.fc-box b { font-weight: 400; font-size: 19px; letter-spacing: -.01em; line-height: 1; }
/* Arrowhead into every step but the first. */
.flow-chart > li + li::before {
    content: ''; position: absolute; z-index: 2; top: -7px; left: calc(var(--bw) / 2 - 4px);
    border: 4px solid transparent; border-bottom: 0; border-top: 6px solid var(--line);
}

.fc-note { margin: 0; min-height: var(--bh); display: flex; flex-direction: column; justify-content: center; color: var(--dim); }
p.fc-note, .fc-sub { font-size: 11px; letter-spacing: .04em; }
.fc-chips { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 11px; color: var(--fg); }
.fc-chips span { position: relative; padding: 3px 7px; border: 1px solid var(--line); }
/* Each arrow rides with the chip it points to, so a wrapped chip keeps it. */
.fc-chips span + span::before { content: '→'; position: absolute; right: calc(100% + 4px); color: var(--dim); }
.fc-sub { margin: 5px 0 0; }

/* ─── Step 04: the gate ─────────────────────────────────────────────── */
.fc-dia {
    justify-self: center; width: var(--dw); height: var(--dh); padding: 0;
    flex-direction: column; justify-content: center; gap: 3px; border: 0; background: none;
}
.fc-dia::before, .fc-dia::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fc-dia::before { inset: 0; background: var(--accent); }
.fc-dia::after { inset: 1.5px; background: var(--bg); }
.fc-dia > * { position: relative; z-index: 1; }
.fc-dia b { font-size: 17px; }
.fc-key .fc-note { min-height: var(--dh); }
.fc-yes { position: absolute; top: calc(var(--dh) + 5px); left: calc(var(--bw) / 2 + 9px); font-size: 10px; color: var(--dim); }

/* The branch: out to Stabilize on a solid arm, back on a dashed one.
   Both arms start on the diamond's edge, 9px above and below its tip. */
.fc-branch { position: relative; }
.fc-arm {
    --arm-x: -51px;   /* the diamond's edge, measured from the note column */
    position: absolute; left: var(--arm-x); width: calc(100px - var(--arm-x)); top: calc(50% - 9px);
    border-top: 1px solid var(--line);
}
.fc-arm::after { content: ''; position: absolute; top: -4.5px; right: -1px; border: 4px solid transparent; border-right: 0; border-left: 6px solid var(--line); }
.fc-back { top: calc(50% + 9px); border-top-style: dashed; }
.fc-back::after { right: auto; left: -1px; border-left: 0; border-right: 6px solid var(--line); }
.fc-arm i { position: absolute; bottom: 4px; left: calc(-1 * var(--arm-x) + 4px); font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--dim); white-space: nowrap; }
.fc-side {
    position: absolute; left: 100px; top: 50%; translate: 0 -50%; height: 40px; display: flex; align-items: center;
    padding: 0 12px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; color: var(--fg);
}

/* ─── The loop: dashed, from 08 back up into 01 ─────────────────────── */
.fc-loop {
    position: relative; grid-column: 2; grid-row: 1 / 9; margin: calc(var(--bh) / 2) 0;
    border: 1px dashed var(--line); border-right: 0;
}
.fc-loop::after { content: ''; position: absolute; top: -4.5px; right: 0; border: 4px solid transparent; border-right: 0; border-left: 6px solid var(--line); }
.fc-loop span {
    position: absolute; top: 50%; left: -1px; translate: -50% -50%; rotate: 180deg; writing-mode: vertical-rl;
    padding: 8px 0; background: var(--bg); font-size: 10px; letter-spacing: .06em; color: var(--dim); white-space: nowrap;
}

/* ─── Legend ────────────────────────────────────────────────────────── */
.fc-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 44px 0 0; padding-top: 10px;
    border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .06em; color: var(--dim);
}
.fc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.fc-legend i { display: inline-block; }
.lg-box { width: 13px; height: 9px; border: 1px solid var(--line); }
.lg-dia { width: 8px; height: 8px; margin: 0 2px; border: 1.5px solid var(--accent); rotate: 45deg; }
.lg-line, .lg-loop { width: 20px; border-top: 1px solid var(--line); }
.lg-loop { border-top-style: dashed; }

@media (max-width: 900px) { .flow { max-width: none; } }
/* Narrow laptops get the half column, phones the full width: both use the
   compact grid, with the lane labels at the right end of their rule. */
@media (max-width: 1180px) {
    .fc { --bw: 150px; --bh: 46px; --dw: 140px; --dh: 70px; --cg: 12px; --rg: 28px; grid-template-columns: 0 14px var(--bw) minmax(0, 1fr); }
    /* Lane labels move to the right end of their rule. */
    .fc-band { position: relative; }
    .fc-band span { position: absolute; right: 0; top: 0; padding-top: 4px; }
    .fc { margin-top: 20px; }
    .fc-b1 { margin-top: calc(var(--rg) / -2); border-top: 1px solid var(--line); }
    .fc-b1 span { padding-top: 4px; }
    .fc-box { padding: 0 10px; gap: 9px; }
    .fc-box b { font-size: 16px; }
    .fc-dia b { font-size: 15px; }
    .fc-arm { --arm-x: -35px; width: calc(66px - var(--arm-x)); }
    .fc-arm i { font-size: 9px; }
    .fc-side { left: 66px; height: 36px; padding: 0 9px; font-size: 14px; }
}