/* Series-B supporting visuals (staging, 7 Oct 2026). Placed by series_b('<ABF id>', variant) in includes/components.php.
   Default: the whole frame of the canonical master is shown (contain, never cover), sized by the wrapper, at the
   master's own proportions (7:4 or 3:2 from the img width/height attributes). No transforms or negative offsets
   (one phone-only exception, described at the end).
   The only figures that show a window of the frame are listed one by one at the end of this file, each with its reason;
   the phone-only treatments (one frame shown as two stacked windows, two figures left out) are listed after them. */
.sb{display:block;box-sizing:border-box;width:100%;margin:14px 0 0;line-height:0;pointer-events:none}
.sb picture{display:block}
.sb img{display:block;box-sizing:border-box;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;
  border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0b1530}
.sb__parts{display:none}
.sb__cap{display:block;margin-top:6px;font-family:var(--font-mono);font-size:10px;font-weight:400;line-height:1.3;letter-spacing:.06em;text-transform:none;color:#7d87a8}

/* Variants: the wrapper sets the footprint; the picture always fills the wrapper's width. */
.sb--card{max-width:420px}
.sb--lead{max-width:420px;margin:12px 0 4px}
.sb--row{max-width:300px;margin-top:10px}
.sb--step{max-width:380px;margin-top:12px}
.sb--tile{max-width:220px;margin:8px 0 6px}
.sb--mid{max-width:620px;margin:22px 0 6px}
.sb--wide{max-width:940px;margin:26px 0 8px}
.sb--cta{max-width:600px;margin-top:18px}

/* A figure between two page sections (Overview: after the hero, before Problem framing). */
.sb-band{padding:56px 0 0}
.sb-band .sb{margin-top:0}

/* Several separately anchored figures for one piece of text: side by side while each stays at least 220px wide. */
.sb-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:14px;max-width:880px}
.sb-set .sb{margin:0;max-width:none}

/* ---- Fit inside particular page components (wrapper tuning only; native text, controls and badges are untouched) ---- */

/* Cards in a row: the figure sits at the foot of its card, so figures line up across the row whatever the text length.
   .sdc1b62 is already a flex column. The three block cards become flex columns only when they hold a figure; the
   hypothesis card's inline number keeps its 20px line so its title and question do not move. */
.s68686d:has(> .sb),.s030d04:has(> .sb),.sa64e75:has(> .sb){display:flex;flex-direction:column}
.s030d04:has(> .sb) > .s33a46d{display:block;line-height:20px;position:relative;top:2px}
.sdc1b62 > .sb--card,.s68686d > .sb--card,.s030d04 > .sb--card,.sa64e75 > .sb--card{margin-top:auto;padding-top:14px}
.sdc1b62 > .sb--card + .sb--card{margin-top:0}

/* Research questions Q01-Q08: the card is a flex row (id, question). The figure takes a full line of its own below
   the question, aligned with the question text. The width cap is on the picture, not on the flex item, so the
   figure can never sit beside the question and squeeze it. (No :has() here: the wrap must not depend on it. The
   card-foot alignment above does use :has(); without it the figure simply follows the text.) */
.se315c5 > .sb{flex:0 0 100%;max-width:none;margin:0}
.se315c5 > .sb picture,.se315c5 > .sb .sb__cap{max-width:420px}
@media (min-width:760px){
  .se315c5{flex-wrap:wrap}
  .se315c5 > .sddc2c0{flex:1 1 0;min-width:0}
  .se315c5 > .sb{padding-left:64px}
}

/* Investors, INFORM pathway steps 03 and 04: the step columns have no gap, so the figure stops short of the next step. */
.dv-55 > .sb{max-width:278px;padding-right:18px}

/* Validation stage pathway: while stages sit side by side, each heading keeps room for two lines so the figures
   below them line up. The heading text itself is unchanged. */
@media (min-width:640px){.se12feb:has(> .sb) > h3{min-height:2lh}}

/* WP7 (SHM benchmarking): the one work-package figure with six comparator labels; given the wider footprint its row asks for. */
[data-sb="ABF-P04-015"]{max-width:360px}

/* Section figures follow the footprint in each brief (about 720-940px wide), left-aligned like the section text.
   The specification overview (ABF-P03-001) is shown whole, so it is capped a little lower to keep its height in proportion. */
[data-sb="ABF-P03-001"],[data-sb="ABF-P03-021"]{max-width:820px}
[data-sb="ABF-P03-007"]{max-width:760px}
[data-sb="ABF-P03-008"],[data-sb="ABF-P05-004"]{max-width:880px}

@media (max-width:759px){
  .sb--card,.sb--lead,.sb--step,.sb--cta,.sb--mid,.sb--wide,[data-sb="ABF-P03-001"],[data-sb="ABF-P03-007"],[data-sb="ABF-P03-008"],
  [data-sb="ABF-P03-021"],[data-sb="ABF-P04-015"],[data-sb="ABF-P05-004"]{max-width:100%}
  .dv-55 > .sb{max-width:100%;padding-right:0}
  .sb--row{max-width:min(100%,320px)}
}
@media print{.sb,.sb-band{display:none}}

/* ---- Windows: figures that do not show the whole frame -------------------------------------------------------------
   Method: object-fit: cover inside an aspect-ratio box, with object-position chosen on a gridded copy of the master.
   The master file is untouched and the full frame is restored by deleting the rule. Two reasons only:

   (a) Wide placements. The band of the frame that holds every drawn element is shown; only empty background above and
       below it is outside the window. The ratio is whatever that band needs, not the nominal ratio in the brief.   */
[data-sb="ABF-P01-013"] img{aspect-ratio:2.6/1;object-fit:cover;object-position:50% 50%}   /* content 21-78% of height; window 16-84% */
[data-sb="ABF-P02-001"] img{aspect-ratio:2.3/1;object-fit:cover;object-position:50% 38%}   /* content 11-82%; window 9-85% */
[data-sb="ABF-P03-007"] img{aspect-ratio:2.55/1;object-fit:cover;object-position:50% 47%}  /* content 18-80%; window 15-83% */
[data-sb="ABF-P03-008"] img{aspect-ratio:3/1;object-fit:cover;object-position:50% 48%}     /* content 26-72%; window 20-78% */
[data-sb="ABF-P05-004"] img{aspect-ratio:2.5/1;object-fit:cover;object-position:50% 53%}   /* content 19-83%; window 16-86% */
[data-sb="ABF-P07-012"] img{aspect-ratio:3/1;object-fit:cover;object-position:50% 41%}     /* content 26-70%; window 17-75% */
[data-sb="ABF-P03-021"] img{aspect-ratio:2.5/1;object-fit:cover;object-position:50% 47%}   /* content 17-82%; window 14-84% */
/* ABF-P03-001 (brief: 8:3) is NOT windowed: its content runs from about 9% to 89% of the height, so it is shown whole.
   Content bands were measured on the masters (rows whose brightness range exceeds a threshold) and checked by eye. */

/* (b) Page furniture painted into the artwork that repeats the live heading, sentence or button beside the figure.
       The window shows the diagram and leaves the repeated text outside it. Each is on the manual-review register. */
[data-sb="ABF-P01-008"] img{aspect-ratio:3/1;object-fit:cover;object-position:50% 62%}     /* painted section heading + sub-line (12-25%) outside; window 26-84% */
[data-sb="ABF-P08-009"] img{aspect-ratio:3.8/1;object-fit:cover;object-position:50% 63%}   /* painted heading, sentence (15-32%) and "Discuss a pilot" button (84-92%) outside; window 34-80% */
[data-sb="ABF-P01-005"] img{aspect-ratio:1536/870;object-fit:cover;object-position:50% 100%}  /* painted INFORM header bar and step title (0-14%) outside; window 15-100%, concept-only footer kept */
[data-sb="ABF-P02-008"] img{aspect-ratio:2.1/1;object-fit:cover;object-position:50% 72%}   /* painted card title and question bar (6-20%) outside; window 20.5-92% */
[data-sb="ABF-P05-017"] img{aspect-ratio:2.4/1;object-fit:cover;object-position:50% 60%}   /* painted tranche label and title (6-21%) outside; window 23-85% */
[data-sb="ABF-P05-010"] img{aspect-ratio:2.5/1;object-fit:cover;object-position:50% 40%}   /* painted step sentence (87-91%) outside; window 12-82% */

/* ---- Phones only (below 760px) ---------------------------------------------------------------------------------------
   ABF-P03-007 (four numerator/denominator pairings): its brief asks for two pairings per row on phones. The same
   frame is shown as two stacked windows, left half then right half (the split falls in the empty gap between pairings
   two and three, so nothing is cut). Each window is the frame at twice the width, shifted; rows 15-83% of the height.
   ABF-P07-012 and ABF-P08-009 (closing-panel figures): left out on phones. The panel is about 244px wide there; the
   P07-012 brief says to omit it if its labels cannot be read, and the P08-009 brief forbids shrinking its four labelled
   steps into a ribbon. Both are on the manual-review register (a vertical phone composition does not exist). */
@media (max-width:759px){
  [data-sb="ABF-P03-007"] > picture{display:none}
  [data-sb="ABF-P03-007"] > .sb__parts{display:grid;gap:8px}
  [data-sb="ABF-P03-007"] .sb__part{display:block;overflow:hidden;aspect-ratio:896/696;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#fff}
  [data-sb="ABF-P03-007"] .sb__part img{width:200%;max-width:none;aspect-ratio:1792/1024;object-fit:fill;border:0;border-radius:0;transform:translate(0,-15%)}
  [data-sb="ABF-P03-007"] .sb__part + .sb__part img{transform:translate(-50%,-15%)}
  [data-sb="ABF-P07-012"],[data-sb="ABF-P08-009"]{display:none}
}

/* ---- 8 Oct 2026: additional micro heroes (SBR-ADD-001..014) and owner layout corrections -----------------------------
   The 14 additions are drawn on a transparent background (sb--alpha). In a card, row, tile or step they sit on the same
   bordered navy tile as their neighbours, so the frame is the same size and shape; the whole 3:2 frame is shown. */
.sb--alpha img{background:#0b1530}

/* Home hero chain (Material, Mechanism, Signal): the nine-square icon is gone and its slot holds the item's micro hero.
   No tile: the drawing sits straight on the hero, beside its label and sentence. Not lazy-loaded (first screen). */
.sb--marker{flex:0 0 168px;width:168px;max-width:168px;margin:-26px 0 0}
.sb--marker img{border:0;border-radius:0;background:none}
.sb--marker .sb__cap{margin:-4px 0 0 6px;font-size:9px;letter-spacing:.04em;white-space:nowrap}
/* Between the phone layout (one item per row, below 720px) and full desktop, three items share the row: the picture
   sits above its label there, and the connector lines (which need the side-by-side layout) are left out. */
@media (min-width:720px) and (max-width:1099.98px){
  .home-chain > .s1eb9a2{flex-direction:column;gap:2px}
  .home-chain > .s1eb9a2 > .home-chain__link{display:none}
  .home-chain .sb--marker{flex:0 0 auto;margin:0 0 6px}
}
@media (max-width:420px){.sb--marker{flex-basis:128px;width:128px;max-width:128px;margin-top:-16px}.sb--marker .sb__cap{font-size:8px;letter-spacing:0}}

/* Home entry cards ("One programme. Four levels of engagement."): picture, then the status label (01 . Public ...), then
   title and text, as on the other pages. Every picture gets the same 3:2 slot so the four labels line up; the one
   7:4 figure is centred in its slot. */
.sb8c6bf > .sb{margin:0 0 18px;max-width:none}
.sb8c6bf > .sb picture{display:flex;align-items:center;aspect-ratio:3/2}
.sb8c6bf > .sb .sb__cap{margin-top:4px}

/* Architecture G01-G06: a tile figure in every card that has one; the three additions match the three already there. */
/* Pilot environments table and Governance alignment matrix: the additions use the row footprint of their neighbours. */