/* Insights: an issue's figure, the drawing of its process, told once and then explored (figure.js). Built for the four
   directions of 9 Oct 2026 and shared by them (Xavi: "populate to all examples"); The Record's since 14 Oct, and since 15
   Oct laid out by figure.js from the list for any issue's process. The page only says where the figure stands and gives
   it a head and a caption of its own (record.css).

   The markup, inside the page's <figure data-flow>:
     .fx                    the box the flow is laid out in: the figure itself, or a cell inside it. It is a container,
                            and the flow takes its layout from that box's own width, never from the window's, so it is
                            right in a column of any width
       ol.fx-steps          the steps
         li[data-flow-step]   one step: .fx-mod (its module, drawn by insights.js into data-module), .fx-name (its number,
                              .fx-n, and name) and a p (its sentence); a plane's step, or one that branches off the strips,
                              holds the two in a .fx-lab. A connector's words are a span.fx-via inside it
     .fx-replay             the button that tells it again, anywhere in the figure (data-flow-replay; hidden in the HTML)
   figure.js adds svg.fx-links, the connectors (decoration; data-flow-links), before the list.

   The layouts:
     no drawings    (no script): the steps as rows, name then sentence
     stacked        each module at the 120 master beside its name and sentence, one step under another: the strips
                    under 580 px of box, and a plane that has no room for its drawing (data-fx="list")
     strips         from 580 px of box (data-fx="strips"): the steps side by side, each a strip read from the top, as
                    the email draws it: its name as the book's label on a leader, its module, a hairline, its sentence.
                    So the words of the step being told are under the module that has just risen, and the eye stays
                    where it is (Xavi, 9 Oct: "los pasos no se leen bien"). At the 120 master up to 676 px, at the
                    diagram master from 677, and from 846 the modules stand five grid units apart, not four. A step
                    that branches off them stands a level further forward, its words on a leader at its side
     plane          (data-fx="plane"): every module where the issue puts it on the grid, its name and sentence together
                    on a leader at its side, at whichever master figure.js found room for (data-fx-k on the list)
   A browser without container queries shows the stacked layout at every width.

   The official modules at one of the book's two masters, never scaled freely. --k is the master: 1, the diagram master
   (a 140 px slab, a 1 px stroke), or .857, the 120 master (a 120 px slab, a 1.25 px stroke: the book's floor). Each
   drawing's size is its own times --k, and its stroke is --sw (the modules' strokes don't scale with the drawing).
   figure.js sets a step's own measures on its item, for its drawing, its label and its leader to read: --w and --h, the
   drawing's box; --cx (and --tx, --bx, --ly, --ry), its outermost points; --dx and --y, where the box stands (in its
   strip, or on the plane, which --ox and --oy then move into the figure's top left). */
.fx{container:fx/inline-size}
.fx-links,.fx-mod,.fx-ll{display:none}
.fx-lab{display:contents}
.fx-steps{--k:.857;--sw:1.25;--lf:11px;--flow-lift:8px}       /* stacked, a module has 16 px over it: it rises 8 */
.fx-steps li{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding-block:16px;border-top:1px solid var(--edge)}
.fx-mod svg.module{width:calc(var(--w)*var(--k));height:calc(var(--h)*var(--k))}
.fx-mod svg.module [stroke]{stroke-width:var(--sw)}
.fx-name{font-weight:500}
.fx-n{display:inline-block;min-width:2em}
.fx .fx-steps p,.fx.fx .fx-steps p{max-width:none;margin:0;text-wrap:pretty}   /* the page's own rules for its paragraphs stop at the figure */
/* A connector's words, where the steps are a list: the book's outlined tag before the step's name ("No"), or, where they
   say more, after the step's sentence ("Yes · Chooses the next action"). Where there's a drawing they stand beside the
   connector instead (.fx-ll, below), and these are for a screen reader only. */
.fx-via{display:inline-flex;align-items:baseline;gap:8px;font-weight:500}
.fx-name .fx-via{margin-right:8px}
.fx-via-t,.fx-name .fx-via{padding:1px 6px;border:1px solid currentColor;border-radius:var(--r);font-size:.8em;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.fx-name .fx-via{padding:1px 6px}
p .fx-via{display:flex;margin-top:8px;font-weight:400}
/* Replay: a quiet text button, shown by figure.js only where the figure is told (a drawing, with motion) */
.fx-replay{flex:none;padding:4px 0;background:none;border:0;font:inherit;font-size:clamp(15px,1.042vw,1rem);font-weight:500;line-height:1.3;color:var(--deep);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer}
.fx-replay:hover{text-decoration-thickness:2px}
.fx-replay[hidden]{display:none}

/* The rule over a step's words, which only figure.js brings out (.is-on, the active step; .is-told, one already told):
   2 px of Fathom over the step's own hairline, the home's mark for the step being told (components/diagrams/how/).
   It fills from the left: in a third of a second when a reader chooses the step, and over the step's whole time, at
   one speed, like a progress bar, while the story is told (--flow-ms, set by the script). Let go, it fades, and only
   then empties: nothing shrinks back. --rule-y and --rule-r place it where the layout has the hairline. */
.fx-steps li::before,.fx-lab::before{content:"";position:absolute;left:0;right:var(--rule-r,0px);top:var(--rule-y,-1px);height:2px;background:var(--fathom);pointer-events:none;
  opacity:0;transform:scaleX(0);transform-origin:left;transition:opacity .4s,transform 0s .4s}
.fx-steps li.is-on::before,.fx-steps li.is-on .fx-lab::before{opacity:1;transform:none;transition:transform .35s cubic-bezier(.3,.7,.2,1),opacity 0s}
.is-telling .fx-steps li.is-on::before,.is-telling .fx-steps li.is-on .fx-lab::before{transition:transform var(--flow-ms,1300ms) linear,opacity 0s}
.fx-steps li.is-told::before,.fx-steps li.is-told .fx-lab::before{opacity:1;transform:none;transition:none}
.fx-lab::before{content:none}

/* stacked, with its drawings: the module at the left, its name and sentence beside it, at the 120 master however wide
   the box (a plane with no room for its drawing can be in a wide one) */
.fx[data-fx=list] :is(.fx-links,.fx-steps){--k:.857;--sw:1.25;--lf:11px;--flow-lift:8px}
.fx:is([data-fx=strips],[data-fx=list]) .fx-steps li{grid-template-columns:128px minmax(0,1fr);column-gap:16px}
.fx:is([data-fx=strips],[data-fx=list]) .fx-mod{display:block;grid-row:1/span 2;place-self:center}
.fx:is([data-fx=strips],[data-fx=list]) .fx-name{align-self:end}
.fx:is([data-fx=strips],[data-fx=list]) .fx-steps p{align-self:start}

/* From 580 px of box, with its drawings: the strips.
   - The strips are as wide as the modules stand apart on the book's 30° grid (--pitch: four units, 138.56 px; five
     where the box has room, 173.2), so the row is the book's row: every other module a step forward of the one before,
     each connector along the grid, Fathom, a 2 px dot where it starts and an arrowhead where it ends, each end a quarter
     unit off its module (the recipe of components/diagrams/explore.js). The first strip starts on the box's left edge.
   - The label (§13) is the step's own number and name, real text and not a drawn copy: Medium 14 caps, +6%, Fathom,
     on a 28 px leader from the module's top edge, 6 px off the drawing, as explore.js sets it (11 px at the 120
     master). It rises with its module. --lab is the room the labels take over the row.
   - The sentence is at the notes' size (--fs) on the strip's width less --cg, the gap between two strips' hairlines.
   - While the story is told, or a reader has chosen a step, the steps that are neither active nor told step back to
     the second ink, as the home's steps do; at rest every step is in ink.
   Without drawings the steps are rows: number and name in Medium, the sentence beside them. */
@container fx (min-width:580px){
  .fx-links,.fx-steps{--k:.857;--sw:1.25;--lf:11px;--fs:14px;--cg:14px;--pitch:138.56px;--lab:48px;--flow-lift:12px}
  .fx-steps{--rh:var(--rh4)}
  .fx-steps li{--y:var(--y4);--lm:var(--lm4);grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--gap);align-items:baseline;padding-block:12px}
  .fx[data-fx=strips] .fx-steps{position:relative;display:grid;grid-template-columns:repeat(var(--cols,5),calc(var(--pitch)*var(--k)))}
  .fx[data-fx=strips] .fx-steps li{display:block;--ox:0px;--oy:var(--lab);--stage:calc(var(--lab) + var(--rh)*var(--k) + 24px);--rule-y:calc(var(--stage) - 1px);--rule-r:var(--cg);
    padding:var(--stage) var(--cg) 0 0;border-top:0}
  .fx[data-fx=strips] .fx-steps p{padding-top:12px;border-top:1px solid var(--edge);font-size:var(--fs);line-height:1.45;letter-spacing:0;transition:color .25s}
  .fx[data-fx=strips] .fx-links{display:block;position:absolute;margin-top:var(--lab);width:calc(var(--lw)*var(--k));height:calc(var(--rh4)*var(--k));overflow:visible}
  .fx-links .ln{fill:none;stroke:var(--fathom);stroke-width:var(--sw);stroke-linecap:round;vector-effect:non-scaling-stroke}
  .fx-links .ln.dash{stroke-dasharray:4 4;stroke-linecap:butt}
  .fx-links .dot,.fx-links .head{fill:var(--fathom)}
  .fx-l5{display:none}
  .fx[data-fx=strips] .fx-mod{display:block;position:absolute;left:calc(var(--dx,0px)*var(--k));top:calc(var(--y,0px)*var(--k) + var(--lab))}
  .fx[data-fx=strips] .fx-mod::after{content:"";position:absolute;left:calc(var(--cx)*var(--k));bottom:calc(100% + 2px);width:1px;height:28px;background:var(--fathom)}
  /* The label's foot stands 36 px over the module (the 2 px gap, the 28 px leader, 6 px of air) and a long name
     breaks upwards within its room (--lm, from figure.js). Centred on its leader, except where that would take it past
     the figure's left edge (the first strip's): then it starts on the edge (--ax, its leader's distance from it). */
  .fx[data-fx=strips] .fx-name{position:absolute;left:calc((var(--dx,0px) + var(--cx))*var(--k));top:calc(var(--y,0px)*var(--k) + var(--lab) - 36px);
    --ax:calc(var(--col,0)*var(--pitch)*var(--k) + (var(--dx,0px) + var(--cx))*var(--k));transform:translate(calc(-1*min(50%,var(--ax))),-100%);
    width:max-content;max-width:calc(var(--lm,240px)*var(--k));font-size:var(--lf);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-align:center;text-wrap:balance;
    transition:translate .6s cubic-bezier(.3,.7,.2,1),opacity .5s cubic-bezier(.2,.7,.2,1),color .25s}
  .fx[data-fx=strips] .fx-n{display:inline;min-width:0}
  .fx[data-fx=strips] .fx-name .fx-via{display:none}
  /* a step that branches off the strips: over the strip it stands in, a level further forward, its words at its side */
  .fx[data-fx=strips] .fx-steps li[data-flow-at]{position:absolute;top:0;left:calc(var(--col)*var(--pitch)*var(--k));width:calc(var(--pitch)*var(--k));padding:0}
  .fx[data-fx=strips] .fx-steps li[data-flow-at]::before{content:none}
  .fx[data-fx=strips] li[data-flow-at] .fx-mod::after{content:none}
  /* the label does what its module does (below): it rises with it, and arrives with it */
  /* (only a strip's own label: a label that stands with its sentence in a .fx-lab, a plane's or a branch's, rises as a
     whole, below. Its name rising too took it through the hairline over it, as if struck out: Xavi, 15 Oct) */
  .is-flow.fx[data-fx=strips] .fx-steps li:not([data-flow-at]).is-on .fx-name{translate:0 calc(-1*var(--flow-lift,12px))}
  .is-armed.fx[data-fx=strips] .fx-steps li:not([data-flow-at]):not(.is-in) .fx-name{opacity:0;translate:0 -14px}
  .is-arriving.fx[data-fx=strips] .fx-steps li:not([data-flow-at]) .fx-name{transition:translate .8s cubic-bezier(.2,.7,.2,1),opacity .8s cubic-bezier(.2,.7,.2,1),color .25s;transition-delay:calc(var(--flow-i,0)*90ms),calc(var(--flow-i,0)*90ms),0s}
  .is-muting.fx[data-fx=strips] li:not(.is-on):not(.is-told) :is(p,.fx-name){color:var(--deep)}
}
@container fx (min-width:677px){.fx-links,.fx-steps{--k:1;--sw:1;--lf:14px;--fs:clamp(15px,1.042vw,1rem);--cg:16px}}
@container fx (min-width:846px){.fx-links,.fx-steps{--pitch:173.2px;--cg:20px}.fx-steps{--rh:var(--rh5)}.fx-steps li{--y:var(--y5);--lm:var(--lm5)}.fx-l4{display:none}.fx-l5{display:inline}}

/* The plane, and a step that branches off the strips. figure.js lays a plane out only where its box has 580 px or
   more (a list under that, as the strips are), so all of this is under the strips' own width.
   - The plane: the drawing at its master (figure.js sets data-fx-k on the figure), every module where the issue puts
     it, the connectors under them. --ox and --oy move the whole into the figure's top left.
   - The words of a plane's step, and of a step that branches off the strips: its name and sentence together, on a
     leader at the side it names (data-side), from the drawing's outermost point on that side. The leader leaves the
     drawing's box 2 px off it, runs 28 px and stops 6 px short of the words (36 in all, never scaled). The words are
     the strips' own: the name as the book's label, the sentence at the notes' size under it, a hairline over the two
     that the rule fills while the step is told. They rise, arrive and step back with their module. */
@container fx (min-width:580px){
  .fx[data-fx=plane][data-fx-k="1"] :is(.fx-links,.fx-steps){--k:1;--sw:1;--lf:14px;--fs:clamp(15px,1.042vw,1rem)}
  .fx[data-fx=plane][data-fx-k=".857"] :is(.fx-links,.fx-steps){--k:.857;--sw:1.25;--lf:11px;--fs:14px}
  .fx[data-fx=plane] .fx-steps{position:relative;display:block;width:var(--fw);height:var(--fh);--flow-lift:12px}
  .fx[data-fx=plane] .fx-steps li{position:absolute;left:0;top:0;display:block;width:0;height:0;padding:0;border:0;--y:var(--y4)}
  .fx[data-fx=plane] .fx-steps li::before{content:none}
  .fx[data-fx=plane] .fx-mod{display:block;position:absolute;left:calc(var(--dx)*var(--k) + var(--ox));top:calc(var(--y)*var(--k) + var(--oy))}
  .fx[data-fx=plane] .fx-links{display:block;position:absolute;overflow:visible}
  .fx[data-fx=plane] .fx-links .fx-ll{font-size:var(--lf)}

  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-lab{display:block;position:absolute;width:max-content;max-width:var(--lab-w,13em);padding-top:8px;border-top:1px solid var(--edge);
    font-size:var(--fs);--rule-y:-1px;--rule-r:0px;transition:translate .6s cubic-bezier(.3,.7,.2,1),opacity .5s cubic-bezier(.2,.7,.2,1)}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-lab::before{content:""}
  .fx[data-fx=strips] li[data-flow-at][data-side=right] .fx-lab{max-width:calc(var(--lm)*var(--k))}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-lab::after{content:"";position:absolute;background:var(--fathom)}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-name{display:block;position:static;transform:none;width:auto;max-width:none;font-size:var(--lf);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-align:inherit;white-space:normal;text-wrap:balance;transition:color .25s}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-n{display:inline;min-width:0}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-lab p{margin-top:6px;padding:0;border:0;font-size:var(--fs);line-height:1.4;transition:color .25s}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at]) .fx-via{display:none}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at])[data-side=up] .fx-lab{left:calc((var(--dx) + var(--tx))*var(--k) + var(--ox));top:calc(var(--y)*var(--k) + var(--oy) - 36px);transform:translate(-50%,-100%);text-align:center}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at])[data-side=down] .fx-lab{left:calc((var(--dx) + var(--bx))*var(--k) + var(--ox));top:calc((var(--y) + var(--h))*var(--k) + var(--oy) + 36px);transform:translate(-50%,0);text-align:center}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at])[data-side=left] .fx-lab{left:calc(var(--dx)*var(--k) + var(--ox) - 36px);top:calc((var(--y) + var(--ly))*var(--k) + var(--oy));transform:translate(-100%,-50%);text-align:right}
  :is(.fx[data-fx=plane] li,.fx[data-fx=strips] li[data-flow-at])[data-side=right] .fx-lab{left:calc((var(--dx) + var(--w))*var(--k) + var(--ox) + 36px);top:calc((var(--y) + var(--ry))*var(--k) + var(--oy));transform:translate(0,-50%);text-align:left}
  .fx[data-fx] li[data-side=up] .fx-lab::after{left:50%;top:calc(100% + 6px);width:1px;height:28px}
  .fx[data-fx] li[data-side=down] .fx-lab::after{left:50%;bottom:calc(100% + 6px);width:1px;height:28px}
  .fx[data-fx] li[data-side=left] .fx-lab::after{left:calc(100% + 6px);top:50%;width:28px;height:1px}
  .fx[data-fx] li[data-side=right] .fx-lab::after{right:calc(100% + 6px);top:50%;width:28px;height:1px}
  .is-flow:is([data-fx=plane],[data-fx=strips]) .fx-steps li:is([data-side]).is-on .fx-lab{translate:0 calc(-1*var(--flow-lift,12px))}
  .is-armed:is([data-fx=plane],[data-fx=strips]) .fx-steps li[data-side]:not(.is-in) .fx-lab{opacity:0;translate:0 -14px}
  .is-arriving:is([data-fx=plane],[data-fx=strips]) li[data-side] .fx-lab{transition:translate .8s cubic-bezier(.2,.7,.2,1),opacity .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--flow-i,0)*90ms)}
  .is-muting:is([data-fx=plane],[data-fx=strips]) li[data-side]:not(.is-on):not(.is-told) .fx-lab :is(p,.fx-name){color:var(--deep)}
  .fx[data-fx=plane] .fx-lab{cursor:pointer}
}
/* A connector's words, drawn beside it: the label's own type (Medium caps, +6%, Fathom), and under it, where it has
   one, a sentence in Book; shown with its connector, a moment after it has begun to draw. In the strips the drawing is
   scaled by the master, so the type is set against it (11 px at the 120 master, 14 at the diagram master). */
.fx[data-fx] .fx-links .fx-ll{display:inline;font-family:var(--font);font-weight:500;font-size:calc(var(--lf) / var(--k));letter-spacing:.06em;text-transform:uppercase;fill:var(--fathom);
  opacity:0;transition:opacity .3s}
.fx[data-fx] .fx-links .fx-ll-s{font-weight:400;letter-spacing:0;text-transform:none}
.fx[data-fx] .fx-links .fx-ll.is-shown{opacity:1;transition:opacity .3s .35s}

/* The modules' part of the motion.
   - The active step's module rises: the kit's own lift and curve (components/diagrams/explore.css).
   - Until the figure is told, a step that hasn't arrived keeps its module out of the picture; they come in as the
     home's diagram has its tools arrive (components/diagrams/how/how.css, d1-in): fading in while they settle 14 px
     into place, 90 ms apart (--flow-i is each one's place in line).
   - The one Sea Mist face waits in white and lights when its step begins.
   - A Deep Teal dot rides the tip of a connector while it draws, as on the home's diagrams.
   Nothing here applies without the script, and with reduced motion every change is at once. */
.is-flow [data-flow-step] [data-module]{cursor:pointer;transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .5s cubic-bezier(.2,.7,.2,1)}
.is-flow [data-flow-step].is-on [data-module]{transform:translateY(calc(-1*var(--flow-lift,12px)))}
.is-armed [data-flow-step]:not(.is-in) [data-module]{opacity:0;pointer-events:none;transform:translateY(-14px)}
.is-arriving [data-flow-step] [data-module]{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--flow-i,0)*90ms)}
.is-flow :is([data-module=agent-mist],[data-mist]) svg .top{transition:fill .5s}
.is-unlit :is([data-module=agent-mist],[data-mist]) svg .top{fill:var(--white)}
[data-flow-links] .tip{fill:var(--deep);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .fx-steps li::before,.fx-steps li.is-on::before,.fx-lab::before,.fx-steps p,.fx-name,.fx-lab,.fx-ll,.is-flow [data-flow-step] [data-module],.is-flow :is([data-module=agent-mist],[data-mist]) svg .top{transition:none!important}
}
@media print{
  .fx-steps li::before,.fx-lab::before,[data-flow-links] .tip,.fx-replay{display:none}
  .fx-steps p,.fx-name,.fx-lab,.is-flow [data-flow-step] [data-module],.is-flow :is([data-module=agent-mist],[data-mist]) svg .top{transition:none!important}
  .is-armed [data-flow-step]:not(.is-in) [data-module]{opacity:1;transform:none}
  .is-armed .fx-steps li .fx-name,.is-armed .fx-steps li .fx-lab{opacity:1!important}
  .is-muting .fx-steps li :is(p,.fx-name){color:inherit!important}
  .is-unlit :is([data-module=agent-mist],[data-mist]) svg .top{fill:var(--mist)}
  [data-flow-link]{mask:none}
  .fx-links .fx-ll{opacity:1}
}
@container fx (min-width:580px){@media print{.is-armed .fx[data-fx=strips] li .fx-name,.is-armed.fx[data-fx=strips] li .fx-name{translate:none!important}}}