/* =============================================================================
   Bioreactor, parts 2 and 3: five explanatory drawings (17 Oct 2026)
   -----------------------------------------------------------------------------
   figure.bv-fig.bv-release  2.1  the organism in the soil, or in the machine
   figure.bv-fig.bv-fiber    2.2  one hollow fiber, cut across
   .bv-hl-row > .bv-hl       3.1-3.3  three highlight cards, each headed by a spot
                             illustration (svg.bv-hl__art), then its h3 and its p

   One palette with the 3D viewer's loop toggles and the 5.1 loop diagram
   (bio-final.css): culture amber #e08a22, protectant green #23864f. Ink and
   greys are the record's own (hwdoc.css). Hardware is a pale body on a 1.5 px
   grey outline; every outline keeps its weight at any size
   (vector-effect: non-scaling-stroke), so the five drawings match each other
   on a laptop and on a phone. All words are real <text>.

   One motion rule for the set: only the protectant moves. Its dots run down
   their lines and drift out through the fiber wall; the organism never moves.
   CSS only, and still under prefers-reduced-motion.

   Everything is scoped to .bv-fig, .bv-hl-row and .bv-art. Light record only.
   ========================================================================== */

.bv-fig,
.bv-hl-row {
  --bv-ink: #1d1d1f;
  --bv-ink-2: #424245;
  --bv-ink-3: #6e6e73;
  --bv-hair: rgb(29 29 31 / .08);
  --bv-cul: #e08a22;          /* culture: the engineered B. subtilis and its loop */
  --bv-cul-d: #b8650f;
  --bv-cul-l: #fcedd7;
  --bv-pro: #23864f;          /* protectant */
  --bv-pro-l: #e3f1e8;
  --bv-pro-m: #d3e9db;
  --bv-hw: #f2f4f6;           /* hardware */
  --bv-hw-line: #7c8791;
  --bv-hw-dark: #4a5058;
  --bv-wall: #c3ccd4;         /* the membrane */
  --bv-soft: #9aa3ab;         /* signals, spread, medium */
  --bv-sans: var(--sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ------------------------------------------------------------- the figures */
/* a white sheet on the section's grey card, as every figure on the record */
body.hwreveal .doc-wrap .doc section.sec > figure.bv-fig { margin: 1.6rem 0 0; }
.bv-fig { container-type: inline-size; }
.bv-fig__sheet {
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bv-hair);
}
@container (max-width: 520px) { .bv-fig__sheet { padding: 14px; border-radius: 18px; } }
.bv-fig > figcaption { margin: .8rem .2rem 0; }
/* before the record turns light, polish.css lifts a section figure's caption into the margin at 1360 px and up */
body:not(.doc-light) .doc .sec > figure.bv-fig > figcaption {
  position: static; width: auto; margin: .8rem .2rem 0; padding: 0; border-left: 0; font-size: .875rem;
}

.bv-art { display: block; width: 100%; height: auto; overflow: hidden; }

/* ------------------------------------------------- 2.1 the two panels */
.bv-release__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.bv-release__panel { min-width: 0; width: 100%; max-width: 380px; margin: 0 auto; }
.bv-release__panel + .bv-release__panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bv-hair); }
@container (min-width: 640px) {
  .bv-release__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-release__panel { max-width: none; margin: 0; }
  .bv-release__panel:first-child { padding-right: 22px; }
  .bv-release__panel + .bv-release__panel { margin-top: 0; padding-top: 0; padding-left: 22px; border-top: 0; border-left: 1px solid var(--bv-hair); }
}
.bv-release__k {
  font: 650 11px/1.3 var(--bv-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bv-ink-3);
}
.bv-release__panel--ours .bv-release__k { color: var(--w-leaf-700, #23684a); }
.bv-release__h {
  margin: 4px 0 12px;
  font: 650 15px/1.3 var(--bv-sans);
  letter-spacing: -.01em;
  color: var(--bv-ink);
}

/* ------------------------------------------------- 2.2 the fiber, two drawings */
.bv-fiber .bv-fib--wide { display: none; max-width: 560px; margin: 0 auto; }
.bv-fiber .bv-fib--narrow { max-width: 400px; margin: 0 auto; }
@container (min-width: 600px) {
  .bv-fiber .bv-fib--wide { display: block; }
  .bv-fiber .bv-fib--narrow { display: none; }
}

/* ------------------------------------------------- part 3, three cards */
/* The row stands where a section card would, edge to edge with the cards
   around it. Each .bv-hl is the record's own section card (section.sec),
   made smaller: its drawing on a white plate, then its title, then its text. */
body.hwreveal .doc-wrap .doc .bv-hl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0 calc(-1 * var(--bleed, 0px)) 1.25rem;
}
body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl {
  margin: 0;
  padding: 12px 12px 1.4rem;
  border-radius: 24px;
  background: var(--w-well, #f5f5f7);
}
body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl > .bv-hl__art {
  height: 176px;               /* phones: a full-width plate, the drawing centred in it */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bv-hair);
}
body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl > h3 {
  gap: .5rem;
  margin: 1.1rem 8px .5rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.012em;
}
body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl > h3 > i { font-size: .75rem; transform: translateY(-.1em); }
body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl > p {
  max-width: none;
  margin: 0 8px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--bv-ink-2);
}
@media (min-width: 820px) {
  body.hwreveal .doc-wrap .doc .bv-hl-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: 0 12px;
  }
  /* the three titles share a row, so the three paragraphs start level */
  body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  body.hwreveal .doc-wrap .doc .bv-hl-row > .bv-hl > .bv-hl__art { height: auto; }
}

/* ------------------------------------------------- the drawing's parts */
.bv-art text { font-family: var(--bv-sans); fill: var(--bv-ink); }
.bv-art .bv-t { font-size: 13px; font-weight: 600; letter-spacing: -.003em; }
.bv-art .bv-s { font-size: 12px; font-weight: 500; fill: var(--bv-ink-3); }
.bv-fib--wide .bv-t { font-size: 14px; }
.bv-fib--wide .bv-s { font-size: 13px; }

.bv-art .bv-ldr { fill: none; stroke: rgb(29 29 31 / .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bv-art .bv-ldr-dot { fill: var(--bv-ink); }

/* hardware */
.bv-art .bv-hw { fill: var(--bv-hw); stroke: var(--bv-hw-line); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-hw-l { fill: none; stroke: var(--bv-hw-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bv-art .bv-cap { fill: var(--bv-hw-dark); }
.bv-art .bv-win { fill: var(--bv-cul-l); stroke: #a6b0b9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bv-art .bv-shellbox { fill: var(--bv-pro-l); stroke: var(--bv-hw-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bv-art .bv-scr { fill: #f7f9fa; stroke: var(--bv-hw-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bv-art .bv-needle { fill: none; stroke: var(--bv-ink); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-beam { fill: none; stroke: var(--bv-soft); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }

/* the culture */
.bv-art .bv-cell { fill: var(--bv-cul); stroke: var(--bv-cul-d); stroke-width: .75; vector-effect: non-scaling-stroke; }
.bv-art .bv-cul-fill, .bv-art .bv-lumen { fill: var(--bv-cul-l); }
.bv-art .bv-loop { fill: none; stroke: var(--bv-cul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-fib-l { fill: none; stroke: var(--bv-cul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bv-art .bv-ah-c { fill: var(--bv-cul); }
.bv-art .bv-tr { fill: none; stroke: #6f7c87; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-tr--c { stroke: var(--bv-cul); }

/* the protectant */
.bv-art .bv-pro { fill: var(--bv-pro); }
.bv-art .bv-ptube { fill: none; stroke: var(--bv-pro-m); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.bv-art .bv-pline { fill: none; stroke: var(--bv-pro); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 8; }
.bv-art .bv-ah-p { fill: var(--bv-pro); }

/* the membrane: a white band under a dashed grey one, so each gap reads as an open pore */
.bv-art .bv-pores { fill: none; stroke: #fff; }
.bv-art .bv-wall { fill: none; stroke: var(--bv-wall); }

/* medium, signals, the field */
.bv-art .bv-med { fill: none; stroke: var(--bv-soft); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-ah-m { fill: var(--bv-soft); }
.bv-art .bv-sig { fill: none; stroke: var(--bv-soft); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-sig-dot { fill: var(--bv-soft); }
.bv-art .bv-spread { fill: none; stroke: var(--bv-soft); stroke-width: 1.25; stroke-dasharray: 3 3.5; vector-effect: non-scaling-stroke; }
.bv-art .bv-ah-spread { fill: var(--bv-soft); }
.bv-art .bv-soil { fill: #f6f1ea; }
.bv-art .bv-ground { fill: none; stroke: #cbbda9; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bv-art .bv-root { fill: none; stroke: #b5a590; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-stem { fill: none; stroke: #5d8b6c; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bv-art .bv-leaf { fill: #e2eee5; stroke: #5d8b6c; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------- motion: the protectant only */
@media (prefers-reduced-motion: no-preference) {
  .bv-art .bv-flow { animation: bv-flow 1.9s linear infinite; }
  .bv-art .bv-x { animation: bv-cross 7.2s cubic-bezier(.45, 0, .55, 1) var(--bv-d, 0s) infinite both; }
}
@keyframes bv-flow { to { stroke-dashoffset: -8; } }
@keyframes bv-cross {
  0%   { transform: translateX(var(--bv-r0, 0px)); opacity: 0; }
  14%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateX(var(--bv-r1, 0px)); opacity: 0; }
}

@media print {
  .bv-fig .bv-fib--wide { display: block; }
  .bv-fig .bv-fib--narrow { display: none; }
}