/* Process diagrams (Dov 2026-11-07: "more diagrams and more process like box arrow box, not only lists").
   One component: .pflow > ol.pf-steps, each step a box, a step may be a stack of boxes (.pf-stack + ul.pf-set).
   Arrows sit in the gap between steps: across on a wide screen, down when the flow stacks.
   .pf-split.pf-three is the home page's shared trunk, then documentation, maintenance and modernization.
   Colours come from the site.css tokens, so the diagrams follow the light and dark palettes. */
.pflow{--gap:44px;--arrow:var(--muted);margin:30px 0 34px;min-width:0}
.pf-title{margin:0 0 14px;font:600 .8rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--gap);align-items:center}
.pf-steps>li{position:relative;min-width:0;--c:var(--li-1)}
.pf-steps>li:nth-child(6n+2){--c:var(--li-2)}.pf-steps>li:nth-child(6n+3){--c:var(--li-3)}.pf-steps>li:nth-child(6n+4){--c:var(--li-4)}
.pf-steps>li:nth-child(6n+5){--c:var(--li-5)}.pf-steps>li:nth-child(6n+6){--c:var(--li-6)}
/* the box */
.pf-steps>li>.sl,.pf-set>li>.sl{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:74px;padding:12px 12px 11px;border:1px solid var(--line-strong);border-top:3px solid var(--c);border-radius:var(--radius,8px);background:var(--raised);text-align:center;text-wrap:balance}
.pflow b{font:600 .95rem/1.25 var(--head);color:var(--ink);letter-spacing:-.005em}
.pflow small{font:400 .78rem/1.35 var(--sans);color:var(--muted)}
/* the machine at either end: an ink box */
.pf-steps>li.pf-machine>.sl{background:var(--ink);border-color:var(--ink);border-top-color:var(--c)}
.pf-steps>li.pf-machine b{color:var(--paper)}.pf-steps>li.pf-machine small{color:color-mix(in srgb,var(--paper) 78%,var(--ink))}
/* the result: filled with its own colour */
.pf-steps>li.pf-end>.sl{background:color-mix(in srgb,var(--c) 12%,var(--raised));border-color:color-mix(in srgb,var(--c) 55%,var(--line-strong));border-width:2px;border-top-width:3px}
.pf-steps>li.pf-end b::before{content:"✓ ";color:var(--c)}
/* a stack: several boxes that act as one step */
.pf-stack{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px dashed color-mix(in srgb,var(--c) 45%,var(--line-strong));border-radius:var(--radius-lg,12px);background:color-mix(in srgb,var(--c) 5%,transparent)}
.pf-lbl{margin:0;font:600 .68rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,var(--ink));text-align:center}
.pf-lbl .sl{display:block}
.pf-set{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-set>li>.sl{min-height:0;padding:8px 10px;border-top-width:1px;border-left:3px solid var(--c)}
.pf-set b{font-size:.88rem}
.pf-vs{margin:-2px 0;text-align:center;font:600 .72rem/1 var(--mono);color:var(--muted)}
/* the arrow: a shaft and a head, drawn by a mask so it takes the token colour */
.pf-steps>li+li::before{content:"";position:absolute;top:50%;left:calc(var(--gap) / -2 - 13px);width:26px;height:14px;margin-top:-7px;background:var(--arrow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 6h19V1l7 6-7 6V8H0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 6h19V1l7 6-7 6V8H0z'/%3E%3C/svg%3E") center/contain no-repeat}
.pflow figcaption{margin-top:16px;font-size:.9rem;color:var(--muted)}
.pflow figcaption .sl{display:block}
.pf-loopnote{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;font-weight:600;font-size:.92rem;color:var(--accent)}
.pf-loopnote::before{content:"↻";font-size:1.15rem;line-height:1}
/* stacked: one column, arrows turn down; a long flow stacks earlier than a short one */
@media(max-width:1000px){
  .pf-long .pf-steps{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);row-gap:34px;max-width:560px;margin-inline:auto}
  .pf-long .pf-steps>li+li::before{top:-30px;left:50%;margin:0 0 0 -13px;transform:rotate(90deg)}
  .pf-long .pf-steps>li>.sl{min-height:0}
}
@media(max-width:760px){
  .pf-steps{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);row-gap:34px;max-width:560px;margin-inline:auto}
  .pf-steps>li+li::before{top:-30px;left:50%;margin:0 0 0 -13px;transform:rotate(90deg)}
  .pf-steps>li>.sl{min-height:0}
  .pf-set.pf-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media print{.pflow{break-inside:avoid}}
/* Boxes that hold a label and one full sentence (Dov 11-07 "website-plain": plain sentences, no .sl runs).
   .pfb is the box; it takes the same look as the older .sl box and reads left-aligned because it holds a sentence. */
.pf-steps>li>.pfb,.pf-set>li>.pfb,.pf-watch>.pfb{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:12px 14px 13px;border:1px solid var(--line-strong);border-top:3px solid var(--c,var(--li-1));border-radius:var(--radius,8px);background:var(--raised,#fff);text-align:left}
.pfb small{font-size:.84rem;line-height:1.45}
.pf-set>li>.pfb{padding:8px 10px;border-top-width:1px;border-left:3px solid var(--c)}
.pf-steps>li.pf-machine>.pfb{background:var(--ink);border-color:var(--ink);border-top-color:var(--c)}
.pf-steps>li.pf-end>.pfb{background:color-mix(in srgb,var(--c) 12%,var(--raised,#fff));border-color:color-mix(in srgb,var(--c) 55%,var(--line-strong));border-width:2px;border-top-width:3px}
.pf-lbl{font:600 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* A shared trunk, then parts side by side (.pf-three below), joined again by "Watch what changed". */
.pf-split{--arrow:var(--muted)}
.pf-split .pf-lbl{margin:0 0 10px;text-align:left;color:var(--muted)}
.pf-split .pf-trunk{align-items:stretch}
.pf-split .pf-trunk>li>.pfb{height:100%}
.pf-fork,.pf-join{color:var(--arrow);height:30px}
.pf-fork svg,.pf-join svg{display:block;width:100%;height:30px}
.pf-branches{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.pf-branch{position:relative;padding:14px 14px 16px;border:1px dashed color-mix(in srgb,var(--b) 50%,var(--line-strong));border-radius:var(--radius-lg,12px);background:color-mix(in srgb,var(--b) 5%,transparent)}
.pf-branch::after{content:"";position:absolute;top:-9px;left:50%;margin-left:-7px;border:7px solid transparent;border-top:8px solid var(--arrow);border-bottom:0}
.pf-maintain{--b:var(--li-2)}.pf-modernize{--b:var(--li-3)}
.pf-split .pf-branch>.pf-lbl{color:color-mix(in srgb,var(--b) 75%,var(--ink));font-size:.78rem}
.pf-branch .pf-steps{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);row-gap:30px}
.pf-branch .pf-steps>li{--c:var(--b)}
.pf-branch .pf-steps>li+li::before{top:-22px;left:50%;margin:0 0 0 -13px;transform:rotate(90deg)}
.pf-watch{position:relative;max-width:620px;margin:0 auto;--c:var(--accent)}
.pf-watch::after{content:"";position:absolute;top:-9px;left:50%;margin-left:-7px;border:7px solid transparent;border-top:8px solid var(--arrow);border-bottom:0}
.pf-watch>.pfb{border-color:var(--accent);border-width:2px;border-top-width:3px}
.pf-watch b::before{content:"↻ ";color:var(--accent)}
.pf-split figcaption{max-width:78ch;margin-top:20px;font-size:.95rem;line-height:1.6}
/* stacked: trunk, then each branch, then watch, all one column with arrows down */
@media(max-width:1000px){
  .pf-split .pf-trunk{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);row-gap:30px}
  .pf-split .pf-trunk>li+li::before{top:-22px;left:50%;margin:0 0 0 -13px;transform:rotate(90deg)}
  .pf-fork,.pf-join{display:none}
  .pf-branches{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:30px}
  .pf-watch{margin-top:30px}
  .pf-branch::after,.pf-watch::after{top:-22px}
}
/* Three parts in a row (Dov 11-08: "doc - maint - mod"), replacing the maintain-or-modernize fork: one arrow between parts. */
.pf-document{--b:var(--li-1)}
.pf-three .pf-trunk{grid-auto-columns:minmax(0,1fr)}
.pf-three .pf-branches{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.pf-three .pf-branch+.pf-branch::before{content:"→";position:absolute;top:50%;left:calc(var(--gap) * -1);width:var(--gap);transform:translateY(-50%);text-align:center;font-size:1.4rem;line-height:1;color:var(--arrow)}
@media(max-width:1000px){
  .pf-three .pf-branches{grid-template-columns:minmax(0,1fr)}
  .pf-three .pf-branch+.pf-branch::before{display:none}
}

/* Source platforms that are uploaded (2026-11-09) */
.pf-delphi{--pf:#a8324a}.pf-dotnet{--pf:#5a3fc0}.pf-pb{--pf:#2b7a78}
@media (min-width:1000px){.pf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}