/* ============================================================
   w-bodyflow.css — "After a meal: from the gut to the liver, and on round the body"
   (js/w-bodyflow.js). The step bar and the step list are the lab's step player (.sp__*, in
   app.css); the labels use the lab's dark-drawing label classes (.lb__*). What is here is this
   widget's own: the layout, the drawing's frame, the two readings with their switch, the key,
   and each step's "Beyond the syllabus" line.
   ============================================================ */
.bf__wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(210px,1fr);gap:16px;align-items:start}
.bf__wrap.bf--stack{grid-template-columns:minmax(0,1fr)}
/* standing in the plate's column (CircLearn.stage): the drawing has the column to itself; the readings and
   their switch, the key and the steps take the text's width, and each step's words stay in the list */
.bf.is-staged .bf__wrap{grid-template-columns:minmax(0,1fr)}
.bf.is-staged .bf__left > .bf__read{margin:2px 0 0}
.sim > .bf__pack{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.sim > .bf__pack .bf__fig{flex:1;min-height:0;display:flex}
.sim > .bf__pack .bf__fig svg{flex:1 1 0;min-height:0;width:100%;height:100%}
.sim > .bf__pack .bf__cap,.sim > .bf__pack .sp__now{display:none!important}
.bf__left{min-width:0}
.bf__fig{margin:0;position:relative}
.bf__svg{width:100%;height:auto;display:block}
.bf__bg{fill:#0D1A22}
.bf__viewline{fill:none;stroke:#2C4452;stroke-width:1.2}
.bf__rim{fill:none;stroke:#E9F1F5;stroke-width:2;stroke-opacity:.85;pointer-events:none}
.bf__tagline rect{fill:#0D1A22;fill-opacity:.82;stroke:#3C5A6A;stroke-width:1}
.bf__tagline text{fill:#E6EEF2;font-family:var(--sans,Inter,system-ui,sans-serif);font-weight:500;letter-spacing:.02em;text-anchor:middle}

/* labels: the lab's .lb classes, and two of this widget's own kinds */
.bf__lb.is-beyond .lb__txt{fill:#A9BAC6;font-style:italic}
.bf__lb.is-tracer .lb__txt{fill:#FFE9A8}
.bf__lb.is-tracer .lb__lead{stroke:#FFE9A8}

/* ---------- the two readings and the switch ---------- */
.bf__read{margin-top:10px;padding:10px 12px 9px;border:1px solid var(--edge);border-radius:var(--r);background:#fff}
.bf__readh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.bf__readt{font-size:13px;font-weight:700;color:var(--ink)}
.bf__tog{display:inline-flex;margin-left:auto;border:1.5px solid var(--k-vessel,#8A5A0E);border-radius:var(--r-pill);overflow:hidden}
.bf__togb{font:inherit;font-size:12.5px;font-weight:600;padding:4px 12px;border:0;background:#fff;color:var(--k-vessel,#8A5A0E);cursor:pointer}
.bf__togb + .bf__togb{border-left:1.5px solid var(--k-vessel,#8A5A0E)}
.bf__togb[aria-pressed="true"]{background:var(--k-vessel,#8A5A0E);color:#fff}
.bf__togb:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.bf__meter{display:grid;grid-template-columns:minmax(118px,auto) minmax(0,1fr);align-items:center;gap:10px;margin:4px 0}
.bf__mname{font-size:12.5px;font-weight:600;color:#3C3C3C}
.bf__bar{position:relative;height:12px;border-radius:var(--r-pill);background:var(--edge-2);overflow:visible}
.bf__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;transition:width .7s cubic-bezier(.45,0,.2,1)}
.bf__fill--portal{background:linear-gradient(90deg,#E9B634,#F6C945)}
.bf__fill--hepatic{background:linear-gradient(90deg,#C9962B,#E0B242)}
.bf__ghost{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#8D8D8D;opacity:.55;border-radius:1px;transition:left .7s cubic-bezier(.45,0,.2,1)}
.bf__readp{margin:7px 0 0;font-size:13px;line-height:1.45;color:#333}
.bf__x{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--grey)}
.bf__xk{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--k-blood,#5B3FA0);border-radius:var(--r-pill);padding:1px 7px;margin-right:5px;vertical-align:1px}

/* ---------- the key ---------- */
.bf__key{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;font-size:12px;color:#4A4A4A;line-height:1.3}
.bf__ki{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bf__ki small{font-size:11px;color:var(--grey);white-space:normal}
.bf__kg{width:15px;height:15px;flex:none;overflow:visible}
.bf__kg--wide{width:34px}
.bf__sw{display:inline-block;width:14px;height:8px;border-radius:4px}
.bf__sw--oxy{background:#E8453F}
.bf__sw--deo{background:#3F72D6}
.bf__sw--por{background:#23A99D}
.bf__ki--note{color:var(--grey)}
.bf__beyondname{font-style:italic;color:#6B7C88;margin-right:3px}

/* the statement numbers: only on the step on screen, so the closed steps stay one line each */
.bf .sp__step:not(.is-on) .sp__tag{display:none}

/* ---------- each step's "Beyond the syllabus" line: only under the step on screen ---------- */
.bf__beyond{display:none;margin:4px 0 2px 42px;font-size:12.5px;line-height:1.45;color:#4A4A4A}
.sp__step.is-on .bf__beyond{display:block}
.bf__beyond summary{cursor:pointer;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red,#B03A2E);
  border:1px solid #E6B7AE;border-radius:var(--r-pill);padding:1px 9px;background:var(--red-tint,#FAECE9);list-style:none}
.bf__beyond summary::-webkit-details-marker{display:none}
.bf__beyond summary::before{content:"+ ";font-weight:700}
.bf__beyond[open] summary::before{content:"− "}
.bf__beyond p{margin:6px 0 0;padding:7px 10px;border-left:3px solid var(--red,#B03A2E);background:var(--red-tint,#FAECE9);border-radius:0 var(--r-sm) var(--r-sm) 0}

.bf__note{margin-top:12px}
@media (max-width:540px){ .bf__meter{grid-template-columns:minmax(104px,auto) minmax(0,1fr)} .bf__beyond{margin-left:6px} }

/* ---------- standing in the plate's column: its own words panel under the step chips (it carries the
   Beyond-the-syllabus line), so the step player's plain panel is not shown ---------- */
.bf .sp__now--panel{display:none!important}
.bf__cap.bf__cap--panel{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 13px 11px;border:1px solid var(--edge);border-left:4px solid var(--k-heart,#A3213A);
  border-radius:10px;background:#fff;color:var(--ink)}
.bf__cap--panel .bf__capt{font-size:15px;line-height:1.55}
.bf.is-staged .bf__wrap > .sp__steps{margin-top:0}
.bf.is-staged .bf__left{margin-top:12px}

/* ---------- a narrow screen: the step on screen, repeated under the drawing ---------- */
.bf__cap{display:none}
.bf--stack .bf__cap{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:9px 12px 10px;border:1.5px solid var(--k-heart,#A3213A);border-radius:var(--r);background:#FBECEF;color:var(--ink)}
.bf__capn{flex:none;width:21px;height:21px;border-radius:50%;background:var(--k-heart,#A3213A);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.bf__capt{font-size:14px;line-height:1.45;min-width:0}
.bf__capp{display:block;margin-top:3px}
.bf__beyond--cap{display:block;margin:6px 0 0}
.bf--stack .sp__step.is-on .sp__p,.bf--stack .sp__step.is-on .bf__beyond{display:none}
.bf--stack .sp__steps{margin-top:12px}