/* about-fig-pipeline.css — styles for about-fig-pipeline.js (about rework, 2026-10-05). Scope every rule under this module's own prefix.

   THE PIPELINE DIAGRAM: one prompt at the top, quoted in full on an index
   slip; a dotted trunk down the middle to the fork and the four models
   (each holding its drawing, small, on graph paper); and partway down, a
   dotted branch to the intake clerk's small card. On the paper of the
   analysis cards (the cream stock, its grain and mottle, the double
   hairline, the slate ink), so it reads as one more document from the
   same file.

   THE DESK is a fixed 550 x 604 stage inside the 640px card: every box is
   placed here from the numbers G names in about-fig-pipeline.js, which
   hands them over as custom properties on the stage (--jdf-px, --jdf-cx0
   …), and the inline SVG draws the lines from the same G. THE PHONE
   (.jd-about--phone) lays the same boxes out in flow — the prompt, the four
   in one row under a CSS-border fork, the clerk under them on a dotted side
   line, its filing shown — and the SVG stands down.

   THE FOCUS: on "Filed by the intake clerk" the scene host carries
   [data-focus="clerk"], and the diagram rearranges to make room (owner,
   2026-10-05, about-pipe2): the prompt and its trunk slide left, then the
   clerk's card grows wider and taller and shows what it filed; its line
   inks up and the fork recedes. One registered number, --jdf-o, tweens
   0 -> 1 and drives all of it (THE DESK, below). */

.jd-about .jdf-pipe {
  --jdf-ink: #37414f;
  --jdf-ink-soft: rgba(55, 65, 79, 0.78);
  --jdf-hair: rgba(55, 65, 79, 0.42);
  --jdf-line: rgba(55, 65, 79, 0.72);
  --jdf-card: #efe4c6;
  --jdf-slip: var(--jd-plate-paper, #f8f3e2);
  --jdf-grid: var(--jd-graph-rule, rgba(74, 98, 138, 0.17));
  --jdf-ease: 0.45s cubic-bezier(.3, .7, .3, 1);
  box-sizing: border-box;
  /* room for the paper's drop shadow inside the card (as .jd-charts-wrap) */
  padding: 2px 30px 40px 4px;
  color: var(--jdf-ink);
}
.jd-about .jdf-pipe *,
.jd-about .jdf-pipe *::before,
.jd-about .jdf-pipe *::after { box-sizing: border-box; }

/* the paper */
.jd-about .jdf-pipe-paper {
  position: relative;
  padding: 30px 28px 30px;
  background: var(--jdf-card) var(--jd-grain-url);
  border: 1px solid rgba(48, 38, 20, 0.55);
  box-shadow: 14px 22px 34px -10px rgba(6, 3, 0, 0.5),
              3px 6px 12px -4px rgba(6, 3, 0, 0.4);
}
.jd-about .jdf-pipe-paper::before {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid var(--jdf-hair);
}
.jd-about .jdf-pipe-paper::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--jd-mottle-url);
  background-size: 420px 420px;
}

/* ---- the desk: a fixed stage, and ONE number that moves it ---------------
   --jdf-o is the clerk's step: 0 on "What happens to a prompt", 1 on "Filed
   by the intake clerk". It is the ONLY transitioned value (registered
   below, so it tweens as a number). Everything that moves is computed from
   it, in two phases that are clamps of it, each eased (smoothstep):
     --jdf-a  the SHIFT: the prompt and its trunk slide left, the prompt
              narrowing as it goes (o 0 .. 0.6);
     --jdf-b  the GROWTH: the clerk's box widens to the left and grows to
              the stage's top and down to the fork (o 0.28 .. 0.92). Its
              head rearranges from a column to a row in the growth's first
              stretch, while the box is still small (the words step right
              of the glyph, then up: --jdf-hx, --jdf-hy), and the inks —
              the box's border, ground and shadow, the glyph, the clerk's
              path — darken with it, so a small box is never dark;
     --jdf-f  the filing fades in as the box opens (o 0.5 .. 0.85).
   Back up the page, o runs 1 -> 0 and the same clamps run backwards: the
   filing fades as the box closes, the box shrinks, the prompt slides home.
   The trunk and the box move in the same frame from the same number, and
   the branch runs on under the box, so no line can come apart. A browser
   without @property (or color-mix) jumps between the two states (still
   whole).

   ARRIVING (about-fig-pipeline.js, wireArrival): a card that comes in on
   the clerk's step does not replay the rearrangement. .is-snap takes the
   transition off for two frames (a focus that lands with the scene), and
   .is-pinned holds the card open while it travels in from below, until
   the clerk's step lights. Never on a ghost. */
@property --jdf-o { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-al { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-bl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-b { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-f { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-hxl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-hyl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-hx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --jdf-hy { syntax: '<number>'; inherits: true; initial-value: 0; }

.jd-about .jdf-pipe-stage {
  position: relative; z-index: 2;
  /* G's numbers arrive inline (about-fig-pipeline.js, stageVars); these
     are the same, for a stage that is somehow without them */
  width: var(--jdf-w, 550px); height: var(--jdf-h, 604px);
  margin: 0 auto;
  --jdf-o: 0;
  --jdf-al: clamp(0, calc(var(--jdf-o) / 0.6), 1);
  --jdf-bl: clamp(0, calc((var(--jdf-o) - 0.28) / 0.64), 1);
  --jdf-a: calc(var(--jdf-al) * var(--jdf-al) * (3 - 2 * var(--jdf-al)));
  --jdf-b: calc(var(--jdf-bl) * var(--jdf-bl) * (3 - 2 * var(--jdf-bl)));
  --jdf-f: clamp(0, calc((var(--jdf-o) - 0.5) / 0.35), 1);
  /* the clerk's head, early in the growth: its words step right clear of
     the glyph (b 0 .. 0.3), then up beside it (b 0.15 .. 0.4) */
  --jdf-hxl: clamp(0, calc(var(--jdf-b) / 0.3), 1);
  --jdf-hyl: clamp(0, calc((var(--jdf-b) - 0.15) / 0.25), 1);
  --jdf-hx: calc(var(--jdf-hxl) * var(--jdf-hxl) * (3 - 2 * var(--jdf-hxl)));
  --jdf-hy: calc(var(--jdf-hyl) * var(--jdf-hyl) * (3 - 2 * var(--jdf-hyl)));
  transition: --jdf-o 1.2s linear;
}
.jd-about [data-scene-pane="pipeline"][data-focus="clerk"] .jdf-pipe-stage,
.jd-about .jd-inline-card:not(.jd-scene-ghost) > .jdf-pipe.is-pinned .jdf-pipe-stage { --jdf-o: 1; }
.jd-about .jd-inline-card:not(.jd-scene-ghost) > .jdf-pipe.is-snap .jdf-pipe-stage { transition: none; }

.jd-about .jdf-pipe-lines {
  position: absolute; left: 0; top: 0;
  width: var(--jdf-w, 550px); height: var(--jdf-h, 604px);
  overflow: visible;
  pointer-events: none;
}
/* the trunk and the arrowhead ride the same number as the boxes they join */
.jd-about .jdf-pipe-trunk { transform: translateX(calc(var(--jdf-shift) * var(--jdf-a) * -1)); }
.jd-about .jdf-pipe-tip { transform: translateX(calc(var(--jdf-tip) * var(--jdf-b) * -1)); }
.jd-about .jdf-pipe-dots {
  fill: none;
  stroke: var(--jdf-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0 6.5;
}
.jd-about .jdf-pipe-head {
  fill: none;
  stroke: var(--jdf-line);
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.jd-about .jdf-pipe-node { fill: var(--jdf-ink); }

/* the small labels: the prompt's, in the analysis cards' mono, tracked */
.jd-about .jdf-pipe-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jdf-ink-soft);
}

/* THE PROMPT: an index slip, the words verbatim. A sentence (the pencil
   stub's 150-odd characters) is set to READ: roman, ranged left on the
   slip's faint rules, under a red head rule; never clamped (the slip is
   wide enough for it in five lines, with room to spare in Chromium and
   WebKit alike, about-pipe2 round 2); a one-word
   prompt (is-short) stands large and centred, as "button" did. */
.jd-about .jdf-pipe-prompt {
  position: absolute; top: 0;
  /* wide and centred at a 0, narrow at the stage's left edge at a 1 (THE
     SLIP NARROWS AS IT GOES, about-fig-pipeline.js); its middle, and so the
     trunk's, moves --jdf-shift × a */
  left: calc(var(--jdf-px0) * (1 - var(--jdf-a)));
  width: calc(var(--jdf-pw0) - (var(--jdf-pw0) - var(--jdf-pw)) * var(--jdf-a));
  height: var(--jdf-ph);
  display: flex; flex-direction: column;
  padding: 13px 18px 0 18px;
  background: var(--jdf-slip);
  border: 1px solid rgba(55, 65, 79, 0.55);
  box-shadow: 0 2px 5px -2px rgba(46, 34, 12, 0.35);
}
.jd-about .jdf-pipe-prompt .jdf-pipe-k {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(178, 64, 52, 0.42);
}
.jd-about .jdf-pipe-q {
  flex: 1 1 auto;                 /* fills the slip: the slack is the paragraph's */
  margin: 0;
  /* 3px at the foot: the quote marks' glyph boxes stand a pixel below the
     last line box, which counted as overflow */
  padding: 6px 0 3px 0.42em;
  text-indent: -0.42em;           /* the opening quote hangs */
  font-family: var(--font-body);
  font-size: 15px; line-height: 20px;
  color: #1f2530;
  /* the slip's rules, one under each line */
  background: repeating-linear-gradient(to bottom,
    transparent 0 19px, rgba(74, 98, 138, 0.22) 19px 20px);
  background-origin: content-box; background-clip: content-box;
}
.jd-about .jdf-pipe-qm { color: var(--jdf-ink-soft); }
.jd-about .jdf-pipe-prompt.is-short { align-items: center; justify-content: center; gap: 12px; padding: 10px; }
.jd-about .jdf-pipe-prompt.is-short .jdf-pipe-k { padding-bottom: 0; border-bottom: 0; }
.jd-about .jdf-pipe-prompt.is-short .jdf-pipe-q {
  padding: 0; text-indent: 0; text-align: center;
  font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1;
  overflow-wrap: anywhere;
}

/* the fork's one annotation, centred under the four models (owner,
   2026-10-05: "move the same instructions one attempt each text down
   below the responses") */
.jd-about .jdf-pipe-note {
  position: absolute; left: 0; right: 0; top: calc(var(--jdf-my) + 154px);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px; line-height: 1;
  color: var(--jdf-ink-soft);
  white-space: nowrap;
  opacity: calc(1 - 0.65 * var(--jdf-o));
}

/* THE INTAKE CLERK: a small catalogue card off the trunk to the right
   (370..550 x 182..274: its glyph, name and model in a column), as it was
   first drawn. On the clerk's step it GROWS (--jdf-b): its left edge to
   286, its top to the stage's top, its foot to just over the crossbar;
   its head turns from a column into a row, and its filing fades in under a
   hairline: the title, then the tags as one cloud keyed by facet (WHAT IT
   FILED, below). Opaque, because the branch runs on under
   it. The filing is set at the opened width throughout, so nothing in it
   reflows as the box grows; the box clips it. */
.jd-about .jdf-pipe-clerk {
  position: absolute; right: 0;
  left: calc(var(--jdf-cx0) - var(--jdf-tip) * var(--jdf-b));
  top: calc(var(--jdf-cy0) + (var(--jdf-cy1) - var(--jdf-cy0)) * var(--jdf-b));
  height: calc(var(--jdf-ch0) + (var(--jdf-ch1) - var(--jdf-ch0)) * var(--jdf-b));
  overflow: hidden;
  background: color-mix(in srgb, var(--jdf-slip) calc(var(--jdf-b) * 100%), #f3ead2);
  border: 1px solid color-mix(in srgb, rgba(31, 37, 48, 0.85) calc(var(--jdf-b) * 100%), rgba(55, 65, 79, 0.45));
  box-shadow: 0 calc(2px + 4px * var(--jdf-b)) calc(5px + 9px * var(--jdf-b)) calc(-3px - 3px * var(--jdf-b)) rgba(46, 34, 12, calc(0.25 + 0.25 * var(--jdf-b))),
              0 0 0 1px rgba(31, 37, 48, calc(0.85 * var(--jdf-b)));
}
.jd-about .jdf-pipe-glyph {
  position: absolute;
  left: calc(14px + 2px * var(--jdf-hy)); top: calc(14px + 10px * var(--jdf-hy));
  width: 30px; height: 21px;
  fill: none; stroke-width: 1.3;
  stroke: color-mix(in srgb, #1f2530 calc(var(--jdf-b) * 100%), var(--jdf-ink-soft));
}
.jd-about .jdf-pipe-glyph-label { fill: rgba(201, 168, 76, 0.35); }
.jd-about .jdf-pipe-clerk-t {
  position: absolute;
  left: calc(14px + 44px * var(--jdf-hx)); top: calc(42px - 25px * var(--jdf-hy));
  display: flex; flex-direction: column; gap: 5px;
  white-space: nowrap;
}
.jd-about .jdf-pipe-clerk-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px; line-height: 1.1;
  color: #1f2530;
}
/* WHAT IT FILED (about-clerk-c, 2026-10-06): the title, then ONE cloud of
   tags, then a key. Each tag is a small paper tag, cut to a point at its
   tied end, with a marker where the eyelet would be; its facet gives it a
   tint (a muted wash of one of the drawer's own inks on the slip: the
   ruling blue, the bench's brass, the red rule) AND a marker shape
   (round, square, diamond), so the facets never part by colour alone. The
   tags stand in the facets' order. The key at the foot names each facet's
   tint and marker by its label. Set at the opened width throughout. */
.jd-about .jdf-pipe-filed {
  position: absolute; left: 17px; top: 72px;
  width: calc(var(--jdf-fw) - 34px);
  height: calc(var(--jdf-ch1) - 72px - 16px);
  margin: 0; padding: 12px 0 0;
  border-top: 1px solid rgba(55, 65, 79, 0.30);
  display: flex; flex-direction: column;
  opacity: var(--jdf-f);
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}
.jd-about .jdf-pipe-entry { margin: 0; }
.jd-about .jdf-pipe-entry > dd { margin: 0; }
.jd-about .jdf-pipe-fk {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.2;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jdf-ink-soft);
}
.jd-about .jdf-pipe-title {
  font-family: var(--font-body);
  font-size: 19px; line-height: 1.2;
  color: #1f2530;
}
.jd-about .jdf-pipe-tagged {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  margin-top: 14px;
}
.jd-about .jdf-pipe-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the three facets' inks, by place (about-fig-pipeline.js, facetCls) */
.jd-about .jdf-pipe .is-f0 { --tg-wash: #dce1e2; --tg-edge: rgba(74, 98, 138, 0.62); --tg-mark: #4a628a; }
.jd-about .jdf-pipe .is-f1 { --tg-wash: #efe2bd; --tg-edge: rgba(143, 116, 68, 0.70); --tg-mark: #8f7444; }
.jd-about .jdf-pipe .is-f2 { --tg-wash: #f0dccd; --tg-edge: rgba(179, 64, 47, 0.52); --tg-mark: #a64534; }

/* the cloud */
.jd-about .jdf-pipe-tags {
  list-style: none;
  margin: 2px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px 6px;
  /* the tags lie on the card: one soft shadow under the lot (a clip-path
     would cut a box-shadow off each) */
  filter: drop-shadow(0 1px 0.8px rgba(46, 34, 12, 0.22));
}
.jd-about .jdf-pipe-tag {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  height: 25px; margin: 0;
  padding: 0 9px 0 22px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14px; line-height: 1;
  color: #1f2530;
  /* the edge: the tag itself in the facet's edge ink, cut to a point … */
  background: var(--tg-edge);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}
/* … and its face, the wash, a hair inside it */
.jd-about .jdf-pipe-tag::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: var(--tg-wash);
  clip-path: polygon(8.6px 0, 100% 0, 100% 100%, 8.6px 100%, 0 50%);
}
/* the marker, where the eyelet would be: round, square, diamond */
.jd-about .jdf-pipe-tag::after,
.jd-about .jdf-pipe-sw::after {
  content: ""; position: absolute;
  left: 10px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--tg-mark);
}
.jd-about .is-f0.jdf-pipe-tag::after, .jd-about .is-f0 > .jdf-pipe-sw::after { border-radius: 50%; }
.jd-about .is-f1.jdf-pipe-tag::after, .jd-about .is-f1 > .jdf-pipe-sw::after { border-radius: 0.5px; width: 6.4px; height: 6.4px; margin-top: -3.2px; }
.jd-about .is-f2.jdf-pipe-tag::after, .jd-about .is-f2 > .jdf-pipe-sw::after { transform: rotate(45deg); width: 6px; height: 6px; margin-top: -3px; left: 10.5px; }
.jd-about .jdf-pipe-tl { position: relative; }

/* the key, at the card's foot under a dotted rule: a small tag of each
   facet's, and its label */
.jd-about .jdf-pipe-key {
  list-style: none;
  margin: auto 0 0; padding: 9px 0 0;
  border-top: 1px dotted rgba(55, 65, 79, 0.45);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px;
}
.jd-about .jdf-pipe-ki {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px; line-height: 1;
  color: var(--jdf-ink);
}
.jd-about .jdf-pipe-sw {
  position: relative; flex: none;
  width: 17px; height: 13px;
  background: var(--tg-edge);
  clip-path: polygon(5.5px 0, 100% 0, 100% 100%, 5.5px 100%, 0 50%);
}
.jd-about .jdf-pipe-sw::before {
  content: ""; position: absolute; inset: 1px;
  background: var(--tg-wash);
  clip-path: polygon(5.1px 0, 100% 0, 100% 100%, 5.1px 100%, 0 50%);
}
.jd-about .jdf-pipe-sw::after { left: 6.5px; }
.jd-about .is-f2 > .jdf-pipe-sw::after { left: 7px; }

/* a model's name (the four, and the clerk's) */
.jd-about .jdf-pipe-name {
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.2;
  color: var(--jdf-ink);
  white-space: nowrap;
}

/* THE FOUR: a plate of graph paper each, the drawing small on it */
.jd-about .jdf-pipe-models {
  position: absolute; left: 0; top: var(--jdf-my);
  width: var(--jdf-w, 550px);
  display: grid; grid-template-columns: repeat(4, 124px); column-gap: 18px;
  margin: 0; padding: 0; list-style: none;
  opacity: calc(1 - 0.6 * var(--jdf-o));
  filter: saturate(calc(1 - 0.5 * var(--jdf-o)));
}
.jd-about .jdf-pipe-model {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.jd-about .jdf-pipe-plate {
  position: relative;
  width: 100%; height: 118px;
  padding: 14px;
  background:
    repeating-linear-gradient(0deg,  var(--jdf-grid) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, var(--jdf-grid) 0 1px, transparent 1px 14px),
    var(--jdf-slip);
  border: 1px solid rgba(55, 65, 79, 0.40);
}
.jd-about .jdf-pipe-plate > svg { display: block; width: 100%; height: 100%; }
.jd-about .jdf-pipe-model .jdf-pipe-name { text-align: center; }

/* the phone's side line exists only on a phone */
.jd-about .jdf-pipe-lane { display: none; }

/* the fork recedes with the step (the trunk's lower half is in it too) */
.jd-about .jdf-pipe-fan { opacity: calc(1 - 0.65 * var(--jdf-o)); }
/* the clerk's whole path inks up with the growth: the stem it shares with
   the four, its branch and the arrowhead */
.jd-about .jdf-pipe-stem .jdf-pipe-dots,
.jd-about .jdf-pipe-side .jdf-pipe-dots {
  stroke: color-mix(in srgb, #1f2530 calc(var(--jdf-b) * 100%), var(--jdf-line));
  stroke-width: calc(2.2px + 0.6px * var(--jdf-b));
}
.jd-about .jdf-pipe-tip .jdf-pipe-head {
  stroke: color-mix(in srgb, #1f2530 calc(var(--jdf-b) * 100%), var(--jdf-line));
  stroke-width: calc(1.6px + 0.4px * var(--jdf-b));
}

/* ---- the focus: "Filed by the intake clerk" ------------------------------
   (everything else is --jdf-o's, above): the filing is in the reading
   order only while the box is open or opening */
.jd-about [data-scene-pane="pipeline"][data-focus="clerk"] .jdf-pipe-filed,
.jd-about .jd-inline-card:not(.jd-scene-ghost) > .jdf-pipe.is-pinned .jdf-pipe-filed {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* reduced motion: the diagram jumps between its two states */
@media (prefers-reduced-motion: reduce) {
  .jd-about .jdf-pipe-stage,
  .jd-about .jdf-pipe-filed,
  .jd-about [data-scene-pane="pipeline"][data-focus="clerk"] .jdf-pipe-filed { transition: none; }
}

/* ---- the phone: the same boxes, in flow ---------------------------------
   No focus on a phone, so the clerk's filing is always shown (the title,
   the cloud and its key), and it needs the column's width; and the figure
   is HELD (a sticky band over the steps), so it must stay short. So: the
   stage is a two-column grid, a 22px LANE on the left and the boxes on the
   right. The prompt on top; the desk's fork in CSS borders (trunk,
   crossbar, four drops) to the four in ONE ROW, small; the note; then the
   clerk, full width, reached by a dotted line that leaves the prompt's left
   edge and runs down the lane into the clerk's head. The clerk's box is
   display: contents here, so its head and its filing are rows of the grid
   and the lane can span exactly to the head. The SVG stands down. */
.jd-about--phone .jdf-pipe { padding: 4px 14px 22px 8px; }
.jd-about--phone .jdf-pipe-paper { padding: 20px 16px 20px 10px; }
.jd-about--phone .jdf-pipe-stage {
  --lane: 22px;      /* the side line's lane, left of every box */
  --gap4: 8px;       /* between the four */
  --drop: 36px;      /* the prompt's foot to the plates' tops: trunk, crossbar, drops */
  --bar: 18px;       /* the crossbar, this far above the plates */
  --head-h: 56px;    /* the clerk's head row */
  width: auto; height: auto;
  display: grid; grid-template-columns: var(--lane) minmax(0, 1fr);
}
.jd-about--phone .jdf-pipe-lines { display: none; }
.jd-about--phone .jdf-pipe-prompt,
.jd-about--phone .jdf-pipe-models,
.jd-about--phone .jdf-pipe-note,
.jd-about--phone .jdf-pipe-clerk-head,
.jd-about--phone .jdf-pipe-filed { grid-column: 2; }
.jd-about--phone .jdf-pipe-prompt,
.jd-about--phone .jdf-pipe-models { position: relative; left: auto; top: auto; width: 100%; }
.jd-about--phone .jdf-pipe-prompt { grid-row: 1; height: auto; padding: 11px 14px 10px; }
.jd-about--phone .jdf-pipe-prompt.is-short { height: 80px; gap: 8px; }
.jd-about--phone .jdf-pipe-prompt .jdf-pipe-k { font-size: 11px; padding-bottom: 6px; }
.jd-about--phone .jdf-pipe-q { font-size: 14.5px; line-height: 19px; padding-top: 4px; padding-bottom: 3px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 18px, rgba(74, 98, 138, 0.22) 18px 19px); }
.jd-about--phone .jdf-pipe-prompt.is-short .jdf-pipe-q { font-size: 26px; }
.jd-about--phone .jdf-pipe-models {
  grid-row: 2;
  margin-top: var(--drop);
  grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap4);
}
/* the crossbar and the two outer drops: one bracket from the first plate's
   centre to the last's */
.jd-about--phone .jdf-pipe-models::before {
  content: ""; position: absolute;
  left: calc((100% - 3 * var(--gap4)) / 8 - 1px);
  right: calc((100% - 3 * var(--gap4)) / 8 - 1px);
  top: calc(-1 * var(--bar));
  height: calc(var(--bar) - 3px);
  border: 2px dotted var(--jdf-line); border-bottom: 0;
}
/* the trunk: the prompt's foot to the crossbar */
.jd-about--phone .jdf-pipe-models::after {
  content: ""; position: absolute;
  left: 50%; margin-left: -1px;
  top: calc(-1 * var(--drop));
  height: calc(var(--drop) - var(--bar));
  border-left: 2px dotted var(--jdf-line);
}
/* the two inner drops */
.jd-about--phone .jdf-pipe-model { position: relative; gap: 6px; }
.jd-about--phone .jdf-pipe-model:nth-child(2)::before,
.jd-about--phone .jdf-pipe-model:nth-child(3)::before {
  content: ""; position: absolute;
  left: 50%; margin-left: -1px;
  top: calc(-1 * var(--bar));
  height: calc(var(--bar) - 3px);
  border-left: 2px dotted var(--jdf-line);
}
.jd-about--phone .jdf-pipe-plate { height: auto; aspect-ratio: 1 / 1; padding: 6px; }
.jd-about--phone .jdf-pipe-model .jdf-pipe-name {
  font-size: 11px; line-height: 1.2; letter-spacing: -0.02em;
  white-space: normal; text-align: center;
}
/* the note, under the four */
.jd-about--phone .jdf-pipe-note {
  grid-row: 3; position: static;
  margin-top: 14px;
  white-space: normal; font-size: 13px;
}
/* the clerk: its box dissolves into two grid rows that wear its border */
.jd-about--phone .jdf-pipe-clerk {
  display: contents;
  position: static; width: auto; height: auto;
}
.jd-about--phone .jdf-pipe-clerk-head {
  grid-row: 4;
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px;
  min-height: var(--head-h); height: var(--head-h);
  padding: 0 14px;
  background: var(--jdf-slip);
  border: 1px solid rgba(55, 65, 79, 0.40); border-bottom: 0;
}
.jd-about--phone .jdf-pipe-filed {
  grid-row: 5;
  margin: 0; padding: 4px 14px 14px;
  border-top: 0;
  background: var(--jdf-slip);
  border: 1px solid rgba(55, 65, 79, 0.40); border-top: 0;
  opacity: 1; visibility: visible; transition: none;
  /* the hairline under the head, inset like the desk's */
  background-image: linear-gradient(rgba(55, 65, 79, 0.30), rgba(55, 65, 79, 0.30));
  background-size: calc(100% - 28px) 1px; background-position: 14px 0; background-repeat: no-repeat;
  padding-top: 12px;
}
.jd-about--phone .jdf-pipe-glyph,
.jd-about--phone .jdf-pipe-clerk-t { position: static; flex: none; }
.jd-about--phone .jdf-pipe-filed {
  position: static; width: auto; visibility: visible;
  grid-template-columns: minmax(0, 1fr); row-gap: 7px;
}
.jd-about--phone .jdf-pipe-filed { height: auto; display: block; }
.jd-about--phone .jdf-pipe-fk { font-size: 10.5px; letter-spacing: 0.08em; margin-bottom: 3px; }
.jd-about--phone .jdf-pipe-title { font-size: 17px; }
.jd-about--phone .jdf-pipe-tagged { margin-top: 10px; }
.jd-about--phone .jdf-pipe-tags { gap: 6px 5px; }
.jd-about--phone .jdf-pipe-tag { height: 23px; font-size: 13.5px; }
.jd-about--phone .jdf-pipe-key { margin-top: 10px; justify-content: flex-start; gap: 4px 12px; }
.jd-about--phone .jdf-pipe-ki { font-size: 12.5px; }
/* the side line: out of the prompt's left edge, down the lane, into the
   clerk's head — a grid item spanning the rows from the prompt to the head */
.jd-about--phone .jdf-pipe-lane {
  display: block;
  grid-column: 1; grid-row: 1 / 5;
  margin: 28px 0 calc(var(--head-h) / 2 - 1px) 7px;   /* level with the slip's PROMPT rule (11 + 11 + 6) … the head's middle */
  border: 2px dotted var(--jdf-line); border-right: 0;
}