/*
  FC1 (D383): the flow chart sheet. Every size is a multiple of --u, 1% of the sheet's width (`cqw` off
  `.pflow-frame`) times --pf-fit, which app-printable-flow.js lowers until the content fits the sheet. So the same
  rules lay the card out on screen, in the Usage review and on A4 or A3 paper, and a long text shrinks instead of
  being cut. Colours come from the centre's brand colours, set on the sheet as --pf-p / -s / -a / -n / -ink / -red.
  The panel around it (Print, Look) uses the chat page's own control classes (.pcard-*) from app.css.
*/
.pcard[data-layout="flowchart"] { --pcard-w: 420px; }
.pflow-frame { container-type: inline-size; width: 100%; }

.pflow-sheet {
  --pf-fit: 1;
  --u: calc(1cqw * var(--pf-fit, 1));
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 100%; aspect-ratio: 210 / 297; background: #fff; color: var(--pf-ink);
  font-family: "Nunito Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pflow-sheet * { box-sizing: border-box; margin: 0; }
.pflow-sheet p, .pflow-sheet h2, .pflow-sheet h4 { padding: 0; }
.pf-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pf-ico { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-arrow-ico { width: calc(var(--u) * 2.7); height: calc(var(--u) * 3.4); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-logo { display: block; object-fit: contain; object-position: left center; max-width: 45%; }

/* ---- Look A: steps ---- */
.pflow-sheet[data-style="steps"] .pf-head { padding: calc(var(--u) * 4.4) calc(var(--u) * 5.7) calc(var(--u) * 3); border-bottom: calc(var(--u) * 0.9) solid var(--pf-s); flex: none; }
.pflow-sheet[data-style="steps"] .pf-logo { height: calc(var(--u) * 9.7); }
.pflow-sheet[data-style="steps"] .pf-body { padding-bottom: calc(var(--u) * 3); }
.pflow-sheet[data-style="steps"] .pf-titles { padding: calc(var(--u) * 2.6) calc(var(--u) * 5.7) 0; flex: none; }
.pflow-sheet[data-style="steps"] .pf-title { font-size: calc(var(--u) * 5); line-height: 1.08; font-weight: 900; color: var(--pf-p); text-wrap: balance; }
.pflow-sheet[data-style="steps"] .pf-sub { margin-top: calc(var(--u) * 0.9); font-size: calc(var(--u) * 2.2); line-height: 1.3; opacity: 0.78; }
.pflow-sheet[data-style="steps"] .pf-flow { flex: 1 1 auto; margin-bottom: calc(var(--u) * 2.4); display: flex; flex-direction: column; padding: calc(var(--u) * 2.6) calc(var(--u) * 5.7) 0; }
.pflow-sheet[data-style="steps"] .pf-step { display: flex; align-items: center; gap: calc(var(--u) * 2); background: var(--pf-n); border-radius: calc(var(--u) * 2.3); padding: calc(var(--u) * 2.4) calc(var(--u) * 2.4); border-left: calc(var(--u) * 0.9) solid var(--pf-p); flex: none; }
.pflow-sheet[data-style="steps"] .pf-num { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--pf-p); color: var(--pf-on-p, #fff); font-size: calc(var(--u) * 2.5); font-weight: 900; display: grid; place-items: center; flex: none; }
.pflow-sheet[data-style="steps"] .pf-step-ico { color: var(--pf-p); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.pflow-sheet[data-style="steps"] .pf-text { font-size: calc(var(--u) * 2.15); line-height: 1.35; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pflow-sheet[data-style="steps"] .pf-arrow { flex: 1 1 calc(var(--u) * 3.5); min-height: calc(var(--u) * 2.2); max-height: calc(var(--u) * 7.5); display: grid; place-items: center; color: var(--pf-s); }
.pflow-sheet[data-style="steps"] .pf-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.7); flex: none; }
.pflow-sheet[data-style="steps"] .pf-split[data-lanes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pflow-sheet[data-style="steps"] .pf-lane { border: calc(var(--u) * 0.35) solid var(--pf-s); border-radius: calc(var(--u) * 2.3); padding: calc(var(--u) * 1.7) calc(var(--u) * 2); background: #fff; min-width: 0; }
.pflow-sheet[data-style="steps"] .pf-lane-h { display: flex; align-items: flex-start; line-height: 1.25; gap: calc(var(--u) * 1.1); font-size: calc(var(--u) * 2.2); font-weight: 900; color: var(--pf-p); margin-bottom: calc(var(--u) * 0.7); }
.pflow-sheet[data-style="steps"] .pf-lane-ico { width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); margin-top: calc(var(--u) * -0.25); }
.pflow-sheet[data-style="steps"] .pf-lane-t { font-size: calc(var(--u) * 2); line-height: 1.35; overflow-wrap: anywhere; }
.pflow-sheet[data-style="steps"] .pf-callout { margin: auto calc(var(--u) * 5.7) 0; padding: calc(var(--u) * 1.7) calc(var(--u) * 2.4); background: var(--pf-a); color: var(--pf-ink); border-radius: calc(var(--u) * 2.3); display: flex; align-items: center; gap: calc(var(--u) * 2); flex: none; }
.pflow-sheet[data-style="steps"] .pf-callout-big { font-size: calc(var(--u) * 5.7); font-weight: 900; line-height: 1; }
.pflow-sheet[data-style="steps"] .pf-callout-t { font-size: calc(var(--u) * 2.1); font-weight: 700; line-height: 1.3; }
.pflow-sheet[data-style="steps"] .pf-foot { flex: none; background: var(--pf-p); color: var(--pf-on-p, #fff); padding: calc(var(--u) * 1.7) calc(var(--u) * 5.7); font-size: calc(var(--u) * 1.8); display: flex; justify-content: space-between; gap: calc(var(--u) * 3); }

/* ---- Look B: urgent ---- */
.pflow-sheet[data-style="urgent"] .pf-band { flex: none; background: var(--pf-red); color: #fff; padding: calc(var(--u) * 3.7) calc(var(--u) * 5.4) calc(var(--u) * 3.4); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
.pflow-sheet[data-style="urgent"] .pf-band-words { min-width: 0; }
.pflow-sheet[data-style="urgent"] .pf-title { font-size: calc(var(--u) * 5.9); line-height: 1.02; font-weight: 900; text-wrap: balance; }
.pflow-sheet[data-style="urgent"] .pf-sub { margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 2.1); line-height: 1.3; opacity: 0.94; }
.pflow-sheet[data-style="urgent"] .pf-000 { flex: none; background: #fff; color: var(--pf-red); border-radius: calc(var(--u) * 2.7); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); text-align: center; }
.pflow-sheet[data-style="urgent"] .pf-000 b { display: block; font-size: calc(var(--u) * 6.8); font-weight: 900; line-height: 1; }
.pflow-sheet[data-style="urgent"] .pf-000 span { font-size: calc(var(--u) * 1.7); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pflow-sheet[data-style="urgent"] .pf-body { padding: calc(var(--u) * 3.7) calc(var(--u) * 5.4) calc(var(--u) * 1.7); }
/* The line takes its full spread (each gap 7u) and gives it back when the page is short: gaps shrink to 2.6u first,
   only then does fitFlow lower --pf-fit. The rail ends at the last node, never the page bottom. */
.pflow-sheet[data-style="urgent"] .pf-line { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin-bottom: calc(var(--u) * 3); }
.pflow-sheet[data-style="urgent"] .pf-line > :not(.pf-gap):not(.pf-rail) { flex: none; }
.pflow-sheet[data-style="urgent"] .pf-gap { display: block; flex: 0 1 calc(var(--u) * 7); min-height: calc(var(--u) * 2.6); }
.pflow-sheet[data-style="urgent"] .pf-rail { position: absolute; left: calc(var(--u) * 4.5); top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 0.7); background: linear-gradient(var(--pf-red), var(--pf-p)); }
.pflow-sheet[data-style="urgent"] .pf-st { position: relative; display: flex; align-items: flex-start; gap: calc(var(--u) * 2.7); }
.pflow-sheet[data-style="urgent"] .pf-dot { position: relative; z-index: 1; width: calc(var(--u) * 9.7); height: calc(var(--u) * 9.7); flex: none; border-radius: 50%; background: #fff; border: calc(var(--u) * 0.7) solid var(--pf-red); color: var(--pf-red); display: grid; place-items: center; }
.pflow-sheet[data-style="urgent"] [data-tone="p"] > .pf-dot { border-color: var(--pf-p); color: var(--pf-p); }
.pflow-sheet[data-style="urgent"] .pf-dot-ico { width: calc(var(--u) * 4.7); height: calc(var(--u) * 4.7); }
.pflow-sheet[data-style="urgent"] .pf-dot-n { font-size: calc(var(--u) * 3.8); font-weight: 900; }
.pflow-sheet[data-style="urgent"] .pf-st-body { min-width: 0; padding-top: calc(var(--u) * 0.6); }
.pflow-sheet[data-style="urgent"] .pf-st-n { display: block; font-size: calc(var(--u) * 1.7); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pf-red); }
.pflow-sheet[data-style="urgent"] [data-tone="p"] .pf-st-n { color: var(--pf-p); }
.pflow-sheet[data-style="urgent"] .pf-st-h { margin: 0 0 calc(var(--u) * 0.3); font-size: calc(var(--u) * 2.9); font-weight: 900; line-height: 1.2; color: var(--pf-ink); }
.pflow-sheet[data-style="urgent"] .pf-text { font-size: calc(var(--u) * 2.3); line-height: 1.38; font-weight: 600; overflow-wrap: anywhere; }
.pflow-sheet[data-style="urgent"] .pf-lanes { margin-left: calc(var(--u) * 12.4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.7); }
.pflow-sheet[data-style="urgent"] .pf-lanes[data-lanes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pflow-sheet[data-style="urgent"] .pf-lane { border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.7) calc(var(--u) * 2); min-width: 0; background: color-mix(in srgb, var(--pf-red) 10%, #fff); }
.pflow-sheet[data-style="urgent"] .pf-lane[data-tone="p"] { background: color-mix(in srgb, var(--pf-p) 11%, #fff); }
.pflow-sheet[data-style="urgent"] .pf-lane-h { display: flex; align-items: flex-start; line-height: 1.25; gap: calc(var(--u) * 1.1); font-size: calc(var(--u) * 2.2); font-weight: 900; margin-bottom: calc(var(--u) * 0.7); }
.pflow-sheet[data-style="urgent"] .pf-lane-ico { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); margin-top: calc(var(--u) * -0.2); }
.pflow-sheet[data-style="urgent"] .pf-lane-t { font-size: calc(var(--u) * 2); line-height: 1.35; overflow-wrap: anywhere; }
.pflow-sheet[data-style="urgent"] .pf-callout { margin-top: auto; padding: calc(var(--u) * 1.7) calc(var(--u) * 2.4); background: var(--pf-a); color: var(--pf-ink); border-radius: calc(var(--u) * 2.3); flex: none; }
.pflow-sheet[data-style="urgent"] .pf-callout-t { font-size: calc(var(--u) * 2.2); font-weight: 800; line-height: 1.3; }
.pflow-sheet[data-style="urgent"] .pf-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 5.4); border-top: 1px solid #e5e9ec; }
.pflow-sheet[data-style="urgent"] .pf-logo { height: calc(var(--u) * 6.7); }
.pflow-sheet[data-style="urgent"] .pf-foot-r { font-size: calc(var(--u) * 1.8); opacity: 0.7; text-align: right; }

/* ---- FC2: the panel (a boxed list that is not a sequence) and the callout of a chart that has one ----
   --pf-pc is the panel colour: the centre's primary in the steps look, urgent red in the urgent look. --pf-pc-ink is
   that colour for words on white (the primary darkened toward the ink, in case a centre's primary is light). */
.pf-panel { --pf-pc: var(--pf-p); --pf-on-pc: var(--pf-on-p, #fff); --pf-pc-ink: color-mix(in srgb, var(--pf-p) 70%, var(--pf-ink)); flex: none; border: calc(var(--u) * 0.35) solid var(--pf-pc); border-radius: calc(var(--u) * 2.3); overflow: hidden; background: #fff; }
.pflow-sheet[data-style="urgent"] .pf-panel { --pf-pc: var(--pf-red); --pf-on-pc: #fff; --pf-pc-ink: var(--pf-red); }
.pf-panel-h { padding: calc(var(--u) * 1.5) calc(var(--u) * 3); background: var(--pf-pc); color: var(--pf-on-pc); font-size: calc(var(--u) * 3); font-weight: 900; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.pf-panel-in { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.2) calc(var(--u) * 3) calc(var(--u) * 1.8); }
.pf-panel-side { flex: none; align-self: stretch; display: grid; place-items: center; padding-right: calc(var(--u) * 2.6); border-right: calc(var(--u) * 0.3) solid color-mix(in srgb, var(--pf-pc) 22%, #fff); color: var(--pf-pc); }
.pf-panel-ico { width: calc(var(--u) * 12); height: calc(var(--u) * 12); stroke-width: 1.5; }
.pf-panel-main { flex: 1 1 auto; min-width: 0; }
.pf-panel-lead { margin-bottom: calc(var(--u) * 1); font-size: calc(var(--u) * 2.3); font-weight: 800; line-height: 1.3; color: var(--pf-pc-ink); overflow-wrap: anywhere; }
.pf-panel-list { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * 0.6); }
.pf-panel-list li { position: relative; padding-left: calc(var(--u) * 2.7); font-size: calc(var(--u) * 2.05); line-height: 1.32; font-weight: 600; overflow-wrap: anywhere; }
.pf-panel-list li::before { content: ""; position: absolute; left: calc(var(--u) * 0.3); top: calc(0.66em - var(--u) * 0.65); width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: var(--pf-pc); }
.pf-panel-note { margin: 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4); padding: calc(var(--u) * 1.9) calc(var(--u) * 3); border-radius: calc(var(--u) * 1.8); background: color-mix(in srgb, var(--pf-pc) 10%, #fff); color: var(--pf-pc-ink); font-size: calc(var(--u) * 2.05); font-weight: 700; line-height: 1.38; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.pf-panel-in:last-child { padding-bottom: calc(var(--u) * 2.4); }
/* Steps look: the spacer next to a panel (no arrow), as flexible as an arrow but a touch shorter. */
.pflow-sheet[data-style="steps"] .pf-sep { display: block; flex: 1 1 calc(var(--u) * 3); min-height: calc(var(--u) * 2.2); max-height: calc(var(--u) * 5); }
.pflow-sheet[data-style="urgent"] .pf-panel:not(:last-child) { margin-bottom: calc(var(--u) * 3); }
/* The callout of a chart with a panel: centred and large; caps only while short (JS sets data-len). */
.pflow-sheet[data-panel] .pf-callout { justify-content: center; text-align: center; padding: calc(var(--u) * 1.9) calc(var(--u) * 3); border-radius: calc(var(--u) * 2.6); }
.pflow-sheet[data-panel] .pf-callout-t { font-weight: 900; text-wrap: balance; overflow-wrap: anywhere; }
.pflow-sheet[data-panel] .pf-callout[data-len="short"] .pf-callout-t { font-size: calc(var(--u) * 3.6); line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; }
.pflow-sheet[data-panel] .pf-callout[data-len="long"] .pf-callout-t { font-size: calc(var(--u) * 2.5); line-height: 1.3; }

@media print {
  html.printing-card #print-root[data-size="a4"] .pflow-sheet { height: 297mm; aspect-ratio: auto; }
  html.printing-card #print-root[data-size="a3"] .pflow-sheet { height: 420mm; aspect-ratio: auto; }
}