/* =============================================================================
   Bioreactor part 5, Final Designs & Specifications (17 Oct 2026, second pass)
   -----------------------------------------------------------------------------
   .bf-prog    the opening sequence: the lab bioreactor, an arrow, the commercial one
   .bf-pair    a 3D model beside its specifications: the photometer's part 6 layout (model left, text right), the
               model a little larger; the specifications are the photometer's dl.pm-keyspecs
   .bf-why     5.1.2: four short design points, no table
   .bf-steps   5.2: lab -> product, one change per line, no table
   .bf-screens 5.3.2: the control screen and the phone page, three callouts
   Light record only. Loop colours: culture amber #e08a22, protectant green #23864f.
   ========================================================================== */
.bf { --bf-ink: #1d1d1f; --bf-ink-2: #424245; --bf-ink-3: #6e6e73; --bf-line: rgb(29 29 31 / .1);
  --bf-cul: #e08a22; --bf-pro: #23864f; --bf-warm: #f1ede6; --bf-leaf: #23684a; }

/* ------------------------------------------------------------ the sequence */
/* one light render of both (photos/final-progression.webp, 2:1), the arrow in the clear sweep between them, a label under
   each subject; the two halves link down to 5.1 and 5.3 */
.bf-prog { margin: 1.6rem 0 0; }
.bf-prog__media { position: relative; border-radius: 18px; overflow: hidden; background: #ece7df; box-shadow: inset 0 0 0 1px var(--bf-line); }
.bf-prog__media img { display: block; width: 100%; height: auto; }
.bf-prog__arrow { position: absolute; left: 50.5%; top: 55%; width: 7%; max-width: 54px; transform: translate(-50%, -50%); color: #55595f; }
.bf-prog__hit { position: absolute; top: 4%; bottom: 4%; border-radius: 14px; transition: box-shadow .2s, background-color .2s; }
.bf-prog__hit:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px rgb(35 104 74 / .35); }
.bf-prog__hit:focus-visible { outline: 2px solid var(--bf-leaf); outline-offset: -2px; }
.doc .sec p.bf-prog__labs { position: relative; height: 3.1em; margin: .55rem 0 0; max-width: none; font-size: .86rem; line-height: 1.3; }
.bf-prog__labs a { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; color: var(--bf-ink-3); text-decoration: none; }
.bf-prog__labs b { display: block; color: var(--bf-ink); font-weight: 650; }
.bf-prog figcaption { margin-top: .6rem; }
.doc .bf-prog a.bf-prog__hit, .doc .bf-prog .bf-prog__labs a { border: 0; background-image: none; text-decoration: none; }
.doc .bf-prog a.bf-prog__hit:not(:hover) { box-shadow: none; background-color: transparent; }
.doc .bf-prog .bf-prog__labs a:hover b { color: var(--bf-leaf); }
@media (max-width: 640px) { .doc .sec p.bf-prog__labs { font-size: .74rem; } }

/* ------------------------------------------------- model + specifications */
/* the photometer's .fd-pair, model left and text right; the model column is the wider one and its stage taller than
   the photometer's, so the two machines read at a useful size (the owner: "a little bigger this time") */
.bf .bf-pair { margin-top: 1.5rem; }
.bf .xv__stage { aspect-ratio: 4 / 5; }
.bf .xv__poster { object-fit: contain; background: transparent; }
@media (min-width: 900px) {
  .bf .bf-pair { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px 34px; }
}

/* the specifications: the photometer's list (dl.pm-keyspecs) */
.bf-specs h4 { margin: 0 0 .7rem; }
.bf dl.pm-keyspecs { margin: 0; }
.bf dl.pm-keyspecs > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--bf-line); }
.bf dl.pm-keyspecs > div:last-child { border-bottom: 1px solid var(--bf-line); }
.doc .bf dl.pm-keyspecs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-ink-3); padding-top: .2rem; }
.doc .bf dl.pm-keyspecs dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--bf-ink); }
.bf-specs .folds { margin-top: 1rem; }
@media (max-width: 480px) { .bf dl.pm-keyspecs > div { grid-template-columns: 6.2rem minmax(0, 1fr); gap: .6rem; } }

/* the parts key in the fold: the culture loop's numbers amber, the protectant line's green, as the model draws them */
.bf .bf-grp--cul li > i { background: var(--bf-cul); color: #fff; box-shadow: none; }
.bf .bf-grp--pro li > i { background: var(--bf-pro); color: #fff; box-shadow: none; }
.bf .bf-grp--cul .xs__gh { color: #a8620f; }
.bf .bf-grp--pro .xs__gh { color: var(--bf-pro); }
.doc .sec p.bf-also { margin: .2rem 0 0; max-width: none; font-size: 13px; line-height: 1.5; color: var(--bf-ink-3); }

/* ------------------------------------------- 5.1.2: four short design points */
.doc h4.bf-h4 { margin: 2.4rem 0 .9rem; }
ul.bf-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 2.2rem; }
.doc ul.bf-why li { margin: 0; padding: 0; }
.doc ul.bf-why li::before { content: none; }
ul.bf-why b { display: block; padding-bottom: .4rem; margin-bottom: .45rem; font-weight: 650; color: var(--bf-ink);
  background: linear-gradient(var(--bf-leaf), var(--bf-leaf)) left bottom / 2.2rem 2px no-repeat; }
ul.bf-why span { display: block; font-size: .94rem; line-height: 1.55; color: var(--bf-ink-2); }
@media (min-width: 700px) { ul.bf-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ 5.2: lab -> product, one change a line */
.bf-steps__head { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1.15fr); margin: 1.3rem 0 .5rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-ink-3); }
.bf-steps__head span:last-child { grid-column: 3; color: var(--bf-leaf); }
ol.bf-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bf-line); }
.doc ol.bf-steps > li { margin: 0; padding: .95rem 0; border-bottom: 1px solid var(--bf-line);
  display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1.15fr); align-items: baseline; }
.doc ol.bf-steps > li::before { content: none; }
.bf-steps__from { color: var(--bf-ink-3); font-size: .95rem; line-height: 1.5; }
.bf-steps__arr { text-align: center; color: var(--bf-leaf); font-weight: 600; }
.bf-steps__to { color: var(--bf-ink); font-weight: 600; font-size: .95rem; line-height: 1.5; }
@media (max-width: 620px) {
  .bf-steps__head { display: none; }
  .doc ol.bf-steps > li { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .2rem 0; }
  .bf-steps__from { grid-column: 1 / -1; }
  .bf-steps__arr { grid-column: 1; text-align: left; }
  .bf-steps__to { grid-column: 2; }
}

/* ------------------------------------------------------- screen and phone */
.bf-screens { margin: 1.4rem 0 0; }
.bf-screens__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.bf-screens__pic { position: relative; border-radius: 18px; overflow: hidden; background: var(--bf-warm); }
.bf-screens__pic img { display: block; width: 100%; height: auto; }
.bf-co { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bf-leaf); color: #fff; font: 700 12px/1 ui-sans-serif, -apple-system, Arial, sans-serif; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 3px 10px -3px rgb(0 0 0 / .5); }
.bf-screens ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bf-screens li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 9px; font-size: 14px; line-height: 1.4; color: var(--bf-ink-3); }
.bf-screens li > i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bf-leaf); color: #fff;
  font: 700 11px/1 ui-sans-serif, -apple-system, Arial, sans-serif; font-style: normal; }
.bf-screens li b { color: var(--bf-ink); font-weight: 650; }
.doc .bf a.bf-twin { display: inline-flex; align-items: center; gap: .35em; margin-left: .2em; padding: .18em .75em; border-radius: 999px;
  font-weight: 600; font-size: .92em; white-space: nowrap; color: var(--bf-leaf); background: #eef6f1; border: 1px solid rgb(35 104 74 / .25);
  background-image: none; text-decoration: none; }
.doc .bf a.bf-twin:hover { background: #e2f0e7; }
@media (max-width: 640px) {
  .bf-screens__row { grid-template-columns: minmax(0, 1fr); }
  .bf-screens__pic--phone { max-width: 230px; margin: 0 auto; }
  .bf-screens ol { grid-template-columns: minmax(0, 1fr); }
}

/* 7.3: a "planned" tag on a heading */
.bf-planned { display: inline-block; margin-left: .5em; padding: .15em .55em; border-radius: 999px; font-size: .62em; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: .25em; color: #8a5a12; background: #fbecd2; }

/* ------------------------------------------------ 7.3: the containment plan's subsections */
/* each 7.3.x on a hairline, as the photometer's numbered blocks (record-edit.css zeroes part 7's h4 margins) */
body.hwreveal .doc-wrap .doc section.sec.br-open > h4.bf-h4 { margin: 2.6rem 0 .85rem; padding-top: 1.5rem; border-top: 1px solid var(--bf-line); }
body.hwreveal .doc-wrap .doc section.sec.br-open > h3 + h4.bf-h4 { margin-top: 1rem; padding-top: 0; border-top: 0; }
/* "The plan": the containment plan's tables as the photometer's specification list */
body.hwreveal .doc-wrap .doc section.sec > p.bf-plan__h, .doc .sec p.bf-plan__h { margin: 1.5rem 0 .45rem; max-width: none;
  font-family: var(--mono); font-size: .66rem; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-leaf); }
.bf dl.bf-plan { max-width: 46rem; }
/* the refill clip: the poster until the video plays */
.bf-clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #ece7df; object-fit: cover; }

/* 8.1: each part's model or specification, small, under its name */
#sec81 table.bom .bom-spec { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: #6e6e73; }
#sec81 table.bom--usd td.num { white-space: nowrap; }

/* a species name inside a numbered heading (the heading's <i> is its number badge) */
.sec h3 .sp, .sec h4 .sp { font-style: italic; }

/* =============================================================================
   17 Oct 2026, pass 3 (the owner's list)
   .br-res     7.1 / 7.2: results and limits as small cards, four and two across, stacked on a phone
   .bf-duo     7.3.2 and 7.3.5: the text left, a render right (.bf-still); stacked on a phone
   .bvc-irr    7.3.6: the water path, drawn in the 7.3 figures' language (css/bv-contain.css)
   .bom-pop    8.1: the cost chart in a dialog, opened by .bom-pop-btn beside the table
   ========================================================================== */

/* ------------------------------------------------ 7.1 / 7.2: small cards */
.br-res {
  --brc-ink: #1d1d1f; --brc-ink-2: #424245; --brc-ink-3: #6e6e73; --brc-line: rgb(29 29 31 / .09);
  --brc-cul: #e08a22; --brc-cul-d: #b8650f; --brc-cul-l: #fcedd7; --brc-pro: #23864f; --brc-pro-l: #e3f1e8;
  --brc-hw: #f2f4f6; --brc-hw-line: #7c8791; --brc-wall: #c3ccd4; --brc-soft: #9aa3ab; --brc-leaf: #23684a;
  container-type: inline-size;
  margin: .35rem 0 0;
}
.br-res ul.br-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.doc .br-res ul.br-cards > li.br-card { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.doc .br-res ul.br-cards > li.br-card::before { content: none; }
/* a phone: the drawing left, the words right */
.br-res .br-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start;
  padding: 12px 14px 13px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--brc-line);
}
.br-res .br-card__art {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: block; box-sizing: border-box; width: 96px; height: 64px; padding: 6px 2px;
  border-radius: 10px; background: #f1f7f3; overflow: visible;
}
.br-res .br-cards--limit .br-card__art { background: #f3f4f6; }
.doc .br-res .br-card .br-card__t {
  grid-column: 2; display: block; margin: 1px 0 4px; padding: 0; border: 0;
  font: 650 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--brc-ink);
}
.doc .br-res .br-card .br-card__p { grid-column: 2; max-width: none; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--brc-ink-2); }
body.doc-light .doc-wrap .doc .br-res .br-cards li > a.br-card__go,
.doc .br-res .br-cards li > a.br-card__go {
  grid-column: 2; justify-self: start; align-self: end; margin-top: 7px;
  font: 600 12.5px/1.3 var(--sans); color: var(--brc-leaf); text-decoration: none; border: 0; background: none;
}
body.doc-light .doc-wrap .doc .br-res .br-cards li > a.br-card__go:hover,
.doc .br-res .br-cards li > a.br-card__go:hover { color: var(--brc-leaf); text-decoration: underline; text-underline-offset: 2.5px; text-decoration-thickness: 1px; }
.br-res a.br-card__go:focus-visible { outline: 2px solid var(--brc-leaf); outline-offset: 2px; border-radius: 3px; }
/* wider: two across. The limits stay drawing-left (two wide cards); the results stand up, drawing on top, then go four across */
@container (min-width: 520px) {
  .br-res ul.br-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-res .br-cards--2 .br-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; padding: 14px 16px 14px 14px; }
  .br-res .br-cards--2 .br-card__art { width: 112px; height: 76px; padding: 8px 2px; }
  .br-res .br-cards--4 .br-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: 12px 12px 14px; }
  .br-res .br-cards--4 .br-card__art { grid-row: auto; width: 100%; height: 72px; padding: 8px 0; margin-bottom: 12px; }
  .doc .br-res .br-cards--4 .br-card .br-card__t, .doc .br-res .br-cards--4 .br-card .br-card__p,
  body.doc-light .doc-wrap .doc .br-res .br-cards--4 li > a.br-card__go, .doc .br-res .br-cards--4 li > a.br-card__go { grid-column: 1; }
  .doc .br-res .br-cards--4 .br-card .br-card__t { margin: 0 2px 5px; }
  .doc .br-res .br-cards--4 .br-card .br-card__p { margin: 0 2px; }
  body.doc-light .doc-wrap .doc .br-res .br-cards--4 li > a.br-card__go, .doc .br-res .br-cards--4 li > a.br-card__go { margin: 10px 2px 0; }
}
@container (min-width: 720px) {
  /* one row of four: titles, lines and links start level (subgrid) */
  .br-res ul.br-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  .br-res ul.br-cards--4 > .br-card { grid-row: span 4; grid-template-rows: subgrid; }
}
/* the tiny drawings: the record's palette (culture amber, protectant green, hardware grey) */
.br-card__art .brc-rim { fill: #fff; stroke: var(--brc-hw-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.br-card__art .brc-agar { fill: #fbf5ea; stroke: #e6dccb; stroke-width: .75; vector-effect: non-scaling-stroke; }
.br-card__art .brc-col circle { fill: var(--brc-cul); }
.br-card__art .brc-ok { fill: var(--brc-pro); }
.br-card__art .brc-ok__m { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.br-card__art .brc-cul { fill: var(--brc-cul-l); }
.br-card__art .brc-pores { fill: none; stroke: #fff; stroke-width: 6; }
.br-card__art .brc-wall { fill: none; stroke: var(--brc-wall); stroke-width: 6; stroke-dasharray: 6 3; }
.br-card__art .brc-cell rect { fill: var(--brc-cul); stroke: var(--brc-cul-d); stroke-width: .6; }
.br-card__art .brc-pro circle { fill: var(--brc-pro); }
.br-card__art .brc-arr { fill: none; stroke: var(--brc-pro); stroke-width: 2; stroke-linecap: round; }
.br-card__art .brc-arr-h { fill: var(--brc-pro); }
.br-card__art .brc-band { fill: var(--brc-pro-l); }
.br-card__art .brc-axis { fill: none; stroke: var(--brc-soft); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.br-card__art .brc-curve { fill: none; stroke: var(--brc-cul); stroke-width: 2.2; stroke-linecap: round; }
.br-card__art .brc-knee { fill: var(--brc-cul); stroke: #fff; stroke-width: 1.2; }
.br-card__art .brc-loop { fill: none; stroke: var(--brc-cul); stroke-width: 2.2; }
.br-card__art .brc-loop-h { fill: var(--brc-cul); }
.br-card__art .brc-hw { fill: var(--brc-hw); stroke: var(--brc-hw-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.br-card__art .brc-beam { fill: none; stroke: var(--brc-soft); stroke-width: 1; stroke-dasharray: 2 2; }
.br-card__art .brc-led { fill: var(--brc-pro); }
.br-card__art .brc-dial { fill: none; stroke: #d6dce1; stroke-width: 5; stroke-linecap: round; }
.br-card__art .brc-tick { fill: none; stroke: var(--brc-soft); stroke-width: 1.5; stroke-linecap: round; }
.br-card__art .brc-q { font: 700 20px/1 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); fill: var(--brc-ink-3); }
.br-card__art .brc-time { fill: none; stroke: var(--brc-soft); stroke-width: 1.5; stroke-dasharray: 4 3.5; }
.br-card__art .brc-time-h { fill: var(--brc-soft); }
.br-card__art .brc-once { fill: var(--brc-pro); stroke: #fff; stroke-width: 1.5; }
.br-card__art .brc-later { fill: #fff; stroke: #aab2b9; stroke-width: 1.3; }

/* ------------------------------------------------ 7.3.2 / 7.3.5: text left, a render right */
.bf-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 0 0 1.25rem; }
@media (min-width: 760px) {
  .bf-duo { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
}
body.hwreveal .doc-wrap .doc .bf-duo__text > p {
  max-width: none; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; letter-spacing: -.004em; color: #2b2b2e; text-wrap: pretty;
}
body.hwreveal .doc-wrap .doc .bf-duo__text > p:last-child { margin-bottom: 0; }
.bf-still { margin: 0; }
.bf-still__img { border-radius: 16px; overflow: hidden; background: #f4f4f2; outline: 1px solid var(--bf-line); outline-offset: -1px; }
.bf-still__img img { display: block; width: 100%; height: auto; }
/* the render not there yet (or not found): a plain light frame of the same shape */
.bf-still__img.is-missing { aspect-ratio: 4 / 3; }
.bf-still__img.is-missing img { display: none; }
body.doc-light .doc-wrap .doc .bf-still > figcaption { margin: .6rem .15rem 0; }

/* ------------------------------------------------ 7.3.6: the water path (fig-irrigation) */
/* two drawings: left to right from 680 px of figure, top to bottom below it (as fig-droplet). Water blue, the
   protectant green, the mix a blue line carrying green beads; what is planned is dashed violet, as in 7.3.1-7.3.4 */
.bvc-irr { --bvc-water: #4a86c5; --bvc-water-l: #e6eff9; }
.bvc-irr .bvc-svg--wide { display: none; }
.bvc-irr .bvc-svg--tall { max-width: 420px; margin: 0 auto; }
@container (min-width: 680px) {
  .bvc-irr .bvc-svg--wide { display: block; }
  .bvc-irr .bvc-svg--tall { display: none; }
}
/* css/bv-contain.css loads after this sheet (from inside 7.3.1), so every rule here carries .bvc-irr to win */
.bvc-irr .bvc-svg .bvc-kick--plan { fill: var(--bvc-plan); }
.bvc-irr .bvc-svg .bvc-water { fill: none; stroke: var(--bvc-water); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bvc-irr .bvc-svg .bvc-water-l { fill: var(--bvc-water-l); }
.bvc-irr .bvc-svg .bvc-water-s { fill: none; stroke: var(--bvc-water); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-wdrop, .bvc-irr .bvc-svg .bvc-ah-w { fill: var(--bvc-water); }
.bvc-irr .bvc-svg .bvc-mixdots { fill: none; stroke: var(--bvc-pro); stroke-width: 4.4; stroke-linecap: round; stroke-dasharray: 0 11; }
.bvc-irr .bvc-svg .bvc-proline { fill: none; stroke: var(--bvc-pro); stroke-width: 3.5; stroke-linecap: round; }
.bvc-irr .bvc-svg .bvc-ah-p { fill: var(--bvc-pro); }
.bvc-irr .bvc-svg .bvc-s--pro { fill: var(--bvc-pro); font-weight: 650; }
.bvc-irr .bvc-svg .bvc-plan-part { fill: var(--bvc-plan-l2); stroke: var(--bvc-plan); stroke-width: 1.4; stroke-dasharray: 3 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-plan-line { fill: none; stroke: var(--bvc-plan); stroke-width: 1.4; stroke-dasharray: 3 2.2; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-plan-sym { fill: none; stroke: var(--bvc-plan); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-soil { fill: #f6f1ea; }
.bvc-irr .bvc-svg .bvc-ground { fill: none; stroke: #cbbda9; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-root { fill: none; stroke: #b5a590; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-stem { fill: none; stroke: #5d8b6c; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bvc-irr .bvc-svg .bvc-leaf { fill: #e2eee5; stroke: #5d8b6c; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* only the protectant moves: its beads drift along the line, slowly */
@media (prefers-reduced-motion: no-preference) {
  .bvc-irr .bvc-mixdots { animation: bvc-irr-flow 2.2s linear infinite; }
}
@keyframes bvc-irr-flow { to { stroke-dashoffset: -11; } }
@media print {
  .bvc-irr .bvc-svg--wide { display: block; }
  .bvc-irr .bvc-svg--tall { display: none; }
}

/* ------------------------------------------------ 8.1: the cost chart in a dialog */
html:not(.js) .bom-pop-btn { display: none; }
.bom-pop-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .45rem; margin: 1.2rem 0 .2rem; padding: .5rem .9rem;
  border: 1px solid #cfd8d3; border-radius: 999px; background: #fff; color: #14402b;
  font: 600 .84rem/1 var(--sans); white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgb(20 64 43 / .06); transition: background-color .18s, border-color .18s;
}
.bom-pop-btn svg { flex: none; width: 14px; height: 14px; color: #4f9c6f; }
.bom-pop-btn:hover { background: #e3f0e8; border-color: #a9c9b7; }
.bom-pop-btn:focus-visible { outline: 2px solid #23684a; outline-offset: 2px; }
.bom-tools .bom-pop-btn { margin: 0; }
dialog.bom-pop {
  width: min(680px, calc(100vw - 24px)); max-width: none;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
}
dialog.bom-pop::backdrop { background: rgb(17 24 20 / .42); }
dialog.bom-pop > #xp-bom {
  margin: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 70px -24px rgb(0 0 0 / .5);
}
#bom-pop .xp-head { padding-right: 3.4rem; }
.bom-pop__x {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: .7rem; right: .7rem; z-index: 1;
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 1px solid #dfe5e1; border-radius: 50%; background: #fff; color: #3d4a44; cursor: pointer;
}
.bom-pop__x svg { width: 14px; height: 14px; }
.bom-pop__x:hover { background: #f2f7f4; }
.bom-pop__x:focus-visible { outline: 2px solid #23684a; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.bom-pop[open] { animation: bom-pop-in .22s ease-out; }
  dialog.bom-pop[open]::backdrop { animation: bom-pop-fade .22s ease-out; }
}
@keyframes bom-pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bom-pop-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 6.1.3 the soldered boards (18 Oct 2026): the sensor adapter cable as one tabbed figure (photo, both sides, the
   circuit; ../photometer/js/pm-tabs.js, its bar .cyc-tabs from ../css/hwdoc.css) beside a reserved plate for the
   controller board (.frame.empty, polish.css). The drawings are img/adapter-*.svg, drawn by
   dev/pcb-diagrams/build_adapter.py. Side by side from 900 px, stacked below. ---- */
.bsb-pair { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.4rem 0 1.6rem; }
@media (min-width: 900px) { .bsb-pair { grid-template-columns: 3fr 2fr; align-items: start; } }
.doc .bsb-pair > figure { margin: 0; min-width: 0; }
.doc .bsb .pm-tabs { margin: 0; }
.doc .bsb .pm-tabs__bar.cyc-tabs { position: relative; top: auto; z-index: 1; max-width: 30rem; margin: 0 auto 1rem; }
.doc .bsb .pm-tabs > [role="tabpanel"][hidden] { display: none !important; }
.doc .bsb .pm-tabs > .is-entering { animation: cyc-in .35s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; }
@media (prefers-reduced-motion: reduce) { .doc .bsb .pm-tabs > .is-entering { animation: none; } }
@media print { .doc .bsb .pm-tabs > [role="tabpanel"][hidden] { display: block !important; } }
.bsb .bsb-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.bsb .bsb-shot { max-width: 560px; margin: 0 auto; }
.bsb .bsb-shot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.bsb figcaption { margin-top: .9rem; }
.doc .bsb-pair > .frame.empty .frame-img { min-height: 14rem; }

/* 18 Oct 2026: the preview box that links out to the team wiki (9.2.7 Scaling): a glimpse of the page, then the link */
.bf-xlink { display: grid; gap: .55rem; margin: 1.25rem 0 .25rem; padding: 1rem 1.15rem 1.05rem; border: 1px solid var(--bf-line, rgb(29 29 31 / .1));
  border-radius: 14px; background: #fff; color: inherit; text-decoration: none; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.bf-xlink:hover, .bf-xlink:focus-visible { box-shadow: 0 8px 24px rgb(0 0 0 / .08); transform: translateY(-1px); border-color: rgb(35 104 74 / .35); }
.bf-xlink__k { font: 600 11px/1.2 var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .12em; text-transform: uppercase; color: #23684a; }
.bf-xlink__t { font-weight: 600; font-size: 1rem; color: var(--bf-ink, #1d1d1f); }
.bf-xlink__tbl { display: grid; font-size: .8125rem; color: var(--bf-ink-2, #424245); border-top: 1px solid var(--bf-line, rgb(29 29 31 / .1));
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.bf-xlink__tbl .r { display: grid; grid-template-columns: 1.4fr 1fr 1fr .6fr; gap: .5rem; padding: .38rem 0; border-bottom: 1px solid var(--bf-line, rgb(29 29 31 / .1)); }
.bf-xlink__tbl .r.h { font-weight: 600; color: var(--bf-ink-3, #6e6e73); font-size: .75rem; }
.bf-xlink__tbl .yes { color: #a3361f; font-weight: 600; } .bf-xlink__tbl .no { color: #23684a; font-weight: 600; }
.bf-xlink__go { font-size: .875rem; font-weight: 600; color: #23684a; }
@media (max-width: 520px) { .bf-xlink__tbl .r { grid-template-columns: 1.3fr 1fr 1fr; } .bf-xlink__tbl .r > :nth-child(4) { display: none; } }

/* 18 Oct 2026: 9.2.x Water Supply, a small rear photo with the inlet labelled */
.bf-duo--small { align-items: center; }
@media (min-width: 760px) { .bf-duo--small { grid-template-columns: minmax(0, 1fr) 128px; gap: 1.5rem; } }
.bf-still--port { max-width: 128px; margin: 0 auto; }
.bf-still--port figcaption { font-size: .6875rem; line-height: 1.35; margin-top: .4rem; }
.bf-still--port .bf-still__img { position: relative; background: #ececec; }
.bf-port-tag { position: absolute; transform: translate(10px, -50%); padding: .12rem .38rem; border-radius: 999px;
  background: #23684a; color: #fff; font: 600 10px/1.2 var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .06em; white-space: nowrap; }
.bf-port-tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1.5px; background: #23684a; }

/* 19 Oct 2026, the owner: the preview card did not read as a link. It now looks like a small browser window onto
   the page it opens: a title strip with three dots and the address (from its own href), an "opens in a new tab"
   mark, and a filled button at the foot. The whole card stays the link. */
.bf-xlink { padding-top: 0; cursor: pointer; border-color: rgb(35 104 74 / .28); }
.bf-xlink::before {
  content: attr(href);
  display: block; margin: 0 -1.15rem .35rem; padding: .42rem 2.4rem .42rem 3.6rem;
  border-bottom: 1px solid var(--bf-line, rgb(29 29 31 / .1));
  background:
    radial-gradient(circle at 1.25rem 50%, #ff5f57 3.5px, transparent 4px),
    radial-gradient(circle at 1.95rem 50%, #febc2e 3.5px, transparent 4px),
    radial-gradient(circle at 2.65rem 50%, #28c840 3.5px, transparent 4px),
    #f4f6f5;
  font: 500 11px/1.4 var(--mono, ui-monospace, Menlo, monospace); color: var(--bf-ink-3, #6e6e73);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-xlink::after {
  content: "\2197"; position: absolute; top: .3rem; right: .6rem;
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  font: 700 .8rem/1 var(--sans, system-ui, sans-serif); color: #23684a; background: rgb(35 104 74 / .1);
  transition: background-color .2s ease, color .2s ease;
}
.bf-xlink__go {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem;
  padding: .45rem .95rem; border-radius: 999px; background: #23684a; color: #fff;
  transition: background-color .2s ease, gap .2s ease;
}
.bf-xlink:hover::after, .bf-xlink:focus-visible::after { background: #23684a; color: #fff; }
.bf-xlink:hover .bf-xlink__go, .bf-xlink:focus-visible .bf-xlink__go { background: #1b553c; gap: .6rem; }
.bf-xlink:focus-visible { outline: 2px solid #23684a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bf-xlink, .bf-xlink::after, .bf-xlink__go { transition: none; } }