/* Source-bound visual teaching, scoped to selected content-remake pages. */
body[data-bw-visual-learning] .bwcr {
  --vl-navy: #10111b;
  --vl-navy-soft: #1c2031;
  --vl-ivory: #fffefa;
  --vl-lavender: #d7c7f1;
  --vl-purple: #593a87;
  --vl-purple-dark: #3f2862;
  --vl-cyan: #2f7189;
  --vl-gold: #b76d16;
  --vl-line: #b9aec8;
}

body[data-bw-visual-learning] .bwcr .bwcr-intro {
  margin-bottom: 1rem;
  padding-block: 1.1rem;
}
body[data-bw-visual-learning] .bwcr .bwcr-intro h1 { margin-block: .25rem .65rem; }
body[data-bw-visual-learning] .bwcr .bwcr-study-tools {
  margin-block: .75rem;
  padding-block: .75rem;
}
body[data-bw-visual-learning] .bwcr #contents {
  margin-bottom: 1.25rem;
  padding-block: .25rem .75rem;
}
body[data-bw-visual-learning] .bwcr #overview > .bwcr-lead { margin-bottom: 1.25rem; }

body[data-bw-visual-learning] .bwcr .vl-model {
  position: relative;
  margin: 0 0 2.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  overflow: clip;
  border: 1px solid #35294a;
  border-radius: 1.1rem;
  background: var(--vl-navy);
  color: var(--vl-ivory);
  box-shadow: 0 1.25rem 3rem rgba(16, 17, 27, .16);
}
body[data-bw-visual-learning] .bwcr .vl-model::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .32rem;
  background: linear-gradient(90deg, #8060a8, #b9a3d8 52%, #587f92);
}
body[data-bw-visual-learning] .bwcr .vl-model h2,
body[data-bw-visual-learning] .bwcr .vl-model h3 { color: var(--vl-ivory); }
body[data-bw-visual-learning] .bwcr .vl-model-heading { max-width: 62ch; }
body[data-bw-visual-learning] .bwcr .vl-model-heading h2 { margin: .25rem 0 .65rem; }
body[data-bw-visual-learning] .bwcr .vl-model-label {
  margin: 0;
  color: var(--vl-lavender);
  font-weight: 700;
}
body[data-bw-visual-learning] .bwcr .vl-model a { color: #e2d3fb; }
body[data-bw-visual-learning] .bwcr .vl-model button {
  border-color: #c7afe5;
  background: #6b478f;
  color: #fff;
}
body[data-bw-visual-learning] .bwcr .vl-model button[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: #2d1c43;
  box-shadow: 0 0 0 3px rgba(199, 175, 229, .25);
}
body[data-bw-visual-learning] .bwcr .vl-model .vl-secondary {
  background: transparent;
  color: var(--vl-ivory);
}
body[data-bw-visual-learning] .bwcr .vl-model-controls {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #48415a;
}
body[data-bw-visual-learning] .bwcr .vl-model-controls > label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  font-weight: 650;
}
body[data-bw-visual-learning] .bwcr input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: #b89bd9;
}
body[data-bw-visual-learning] .bwcr .vl-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block: 1rem;
}
body[data-bw-visual-learning] .bwcr .vl-button-row button { flex: 1 1 10rem; }
body[data-bw-visual-learning] .bwcr .vl-bound-note,
body[data-bw-visual-learning] .bwcr .vl-model-limit {
  color: #e8e2ef;
  font-size: 1rem;
}
body[data-bw-visual-learning] .bwcr .vl-model-limit {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid #48415a;
}
body[data-bw-visual-learning] .bwcr .vl-static-example {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #625775;
  border-radius: .65rem;
  background: #1a1c29;
}

/* CSF bench */
body[data-bw-visual-learning] .bwcr .vl-csf-bench {
  display: grid;
  grid-template-columns: minmax(14rem, .8fr) minmax(18rem, 1.2fr);
  gap: clamp(1rem, 4vw, 2.25rem);
  align-items: center;
  margin-top: 1.25rem;
}
body[data-bw-visual-learning] .bwcr .vl-csf-specimens {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 5vw, 2.75rem);
  padding: 1rem;
}
body[data-bw-visual-learning] .bwcr .vl-vial {
  display: grid;
  justify-items: center;
  gap: .45rem;
  min-width: 5.6rem;
}
body[data-bw-visual-learning] .bwcr .vl-vial-body {
  position: relative;
  width: 4.6rem;
  height: 10.5rem;
  overflow: hidden;
  border: .28rem solid #cbc2d8;
  border-top-width: .6rem;
  border-radius: .45rem .45rem 1.15rem 1.15rem;
  background: repeating-linear-gradient(to top, transparent 0 1rem, rgba(255,255,255,.18) 1rem 1.08rem), #282b3b;
  box-shadow: inset 0 0 0 .18rem #10111b, 0 .8rem 1.4rem rgba(0, 0, 0, .25);
}
body[data-bw-visual-learning] .bwcr .vl-vial-body::before {
  content: "";
  position: absolute;
  inset: auto .18rem .18rem;
  height: var(--vl-level, 9.5%);
  min-height: 0;
  border-radius: .25rem .25rem .75rem .75rem;
  background: linear-gradient(to right, #68aabd, #d2e9ef);
  transition: height 180ms ease-out;
}
body[data-bw-visual-learning] .bwcr .vl-vial-body.vl-blood::before { background: #b75867; }
body[data-bw-visual-learning] .bwcr .vl-vial-body span {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.18) 30%, transparent 44%);
}
body[data-bw-visual-learning] .bwcr .vl-vial output { font-variant-numeric: tabular-nums; }
body[data-bw-visual-learning] .bwcr .vl-ratio-panel {
  padding: 1.2rem;
  border-radius: .85rem;
  background: #1b1e2c;
}
body[data-bw-visual-learning] .bwcr .vl-ratio-panel > output {
  display: block;
  margin: -.25rem 0 .5rem;
  font: 700 2.4rem/1 "Newsreader", Georgia, serif;
  color: #f4eafc;
  font-variant-numeric: tabular-nums;
}
body[data-bw-visual-learning] .bwcr .vl-ratio-scale {
  position: relative;
  height: 2.2rem;
  margin: 1.25rem .35rem 1.5rem;
  border-radius: 2rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(16,17,27,.62) calc(10% - 1px) 10%),
    linear-gradient(90deg, #c9865b 0 40%, #79a7b7 40% 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
body[data-bw-visual-learning] .bwcr .vl-ratio-zero,
body[data-bw-visual-learning] .bwcr .vl-ratio-one,
body[data-bw-visual-learning] .bwcr .vl-ratio-cut {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  font-size: .95rem;
}
body[data-bw-visual-learning] .bwcr .vl-ratio-zero { left: 0; transform: none; }
body[data-bw-visual-learning] .bwcr .vl-ratio-cut { left: 40%; }
body[data-bw-visual-learning] .bwcr .vl-ratio-one { right: 0; transform: none; }
body[data-bw-visual-learning] .bwcr .vl-ratio-marker {
  position: absolute;
  left: var(--vl-ratio, 20%);
  top: 50%;
  width: 1rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  border: .2rem solid #fff;
  border-radius: .35rem;
  background: #261936;
  box-shadow: 0 0 0 .18rem rgba(16,17,27,.55);
  transition: left 180ms ease-out;
}
body[data-bw-visual-learning] .bwcr .vl-parallel {
  margin-top: 1.25rem;
  padding-top: 1rem;
}
body[data-bw-visual-learning] .bwcr .vl-parallel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
body[data-bw-visual-learning] .bwcr .vl-parallel-heading h3 { margin: 0; }
body[data-bw-visual-learning] .bwcr .vl-parallel ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .8rem;
  padding: 0;
  list-style: none;
}
body[data-bw-visual-learning] .bwcr .vl-parallel li {
  margin: 0;
  padding: .9rem;
  border: 1px solid #4e465d;
  border-radius: .65rem;
  background: #1a1c29;
}
body[data-bw-visual-learning] .bwcr .vl-parallel li.is-active { border-color: #d7c7f1; }
body[data-bw-visual-learning] .bwcr .vl-parallel li p { margin-bottom: .55rem; }
body[data-bw-visual-learning] .bwcr .vl-parallel li p:last-child { margin-bottom: 0; }

/* Ear relationship model */
body[data-bw-visual-learning] .bwcr .vl-ear-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}
body[data-bw-visual-learning] .bwcr .vl-ear-stage {
  padding: .75rem;
  border: 1px solid #4e465d;
  border-radius: .85rem;
  background: #171925;
}
body[data-bw-visual-learning] .bwcr .vl-ear-stage svg { overflow: visible; }
body[data-bw-visual-learning] .bwcr .vl-ear-skull { fill: url(#vl-ear-bone); opacity: .3; stroke: #cfc0df; stroke-width: 4; }
body[data-bw-visual-learning] .bwcr .vl-ear-canal { fill: #161b29; stroke: #9bb3c4; stroke-width: 9; }
body[data-bw-visual-learning] .bwcr .vl-ear-cavity { fill: url(#vl-ear-air); stroke: #a9c6d1; stroke-width: 7; }
body[data-bw-visual-learning] .bwcr .vl-ear-tube { fill: #d9cce6; stroke: #a78dbf; stroke-width: 7; }
body[data-bw-visual-learning] .bwcr .vl-ear-tube-lumen { fill: none; stroke: #283143; stroke-width: 18; stroke-linecap: round; transition: stroke-width 180ms ease-out; }
body[data-bw-visual-learning] .bwcr .vl-ear-membrane { fill: none; stroke: #7b416c; stroke-width: 12; stroke-linecap: round; }
body[data-bw-visual-learning] .bwcr .vl-ear-membrane-retracted,
body[data-bw-visual-learning] .bwcr .vl-ear-membrane-bulging { display: none; }
body[data-bw-visual-learning] .bwcr .vl-ear-fluid { fill: #c68d45; opacity: 0; transition: opacity 180ms ease-out; }
body[data-bw-visual-learning] .bwcr .vl-ear-pressure { opacity: 0; fill: none; stroke: #8a3652; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="obstruction"] .vl-ear-tube-lumen,
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-tube-lumen { stroke-width: 6; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="obstruction"] .vl-ear-fluid { opacity: .58; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-fluid { opacity: .9; fill: #bf6f42; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="obstruction"] .vl-ear-membrane-normal,
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-membrane-normal { display: none; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="obstruction"] .vl-ear-membrane-retracted,
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-membrane-bulging { display: block; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-membrane-bulging { stroke: #bd5264; }
body[data-bw-visual-learning] .bwcr [data-vl-ear-state="inflammation"] .vl-ear-pressure { opacity: 1; }
body[data-bw-visual-learning] .bwcr .vl-ear-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  padding: .8rem 0 0;
  margin: 0;
  list-style: none;
  font-size: 1rem;
}
body[data-bw-visual-learning] .bwcr .vl-ear-legend li { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
body[data-bw-visual-learning] .bwcr .vl-ear-legend span { width: 1.4rem; height: .55rem; border-radius: 1rem; background: #9bb3c4; }
body[data-bw-visual-learning] .bwcr .vl-ear-legend .vl-legend-membrane { background: #a9537f; }
body[data-bw-visual-learning] .bwcr .vl-ear-legend .vl-legend-cavity { background: #b9d9e6; }
body[data-bw-visual-learning] .bwcr .vl-ear-legend .vl-legend-tube { background: #a78dbf; }
body[data-bw-visual-learning] .bwcr .vl-ear-reading {
  align-self: stretch;
  padding: 1rem;
  border-radius: .85rem;
  background: #1b1e2c;
}
body[data-bw-visual-learning] .bwcr .vl-ear-reading h3 { margin: 0 0 .75rem; }
body[data-bw-visual-learning] .bwcr .vl-ear-reading dl { margin: 0; }
body[data-bw-visual-learning] .bwcr .vl-ear-reading dl div { padding-block: .55rem; border-bottom: 1px solid #4e465d; }
body[data-bw-visual-learning] .bwcr .vl-ear-reading dt { color: #d7c7f1; font-weight: 700; }
body[data-bw-visual-learning] .bwcr .vl-ear-reading dd { margin: .2rem 0 0; }

/* Atomic reveal chains */
body[data-bw-visual-learning] .bwcr .vl-chain {
  margin: 1.25rem 0 1.6rem;
  padding: 1.1rem clamp(.9rem, 3vw, 1.35rem);
  border: 1px solid var(--vl-line);
  border-radius: .8rem;
  background: #f1edf6;
}
body[data-bw-visual-learning] .bwcr .vl-chain h3 { margin: 0 0 .8rem; color: #352047; }
body[data-bw-visual-learning] .bwcr .vl-chain > ol { padding: 0; margin: 0; list-style: none; }
body[data-bw-visual-learning] .bwcr .vl-chain [data-vl-step] {
  padding: .8rem 0;
  margin: 0;
  border-top: 1px solid #cfc4da;
}
body[data-bw-visual-learning] .bwcr .vl-chain [data-vl-step]:first-child { border-top: 0; }
body[data-bw-visual-learning] .bwcr .vl-question { margin: 0 0 .5rem; font-weight: 650; }
body[data-bw-visual-learning] .bwcr .vl-question > span {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: #4b3369;
  color: #fff;
  font-size: .95rem;
}
body[data-bw-visual-learning] .bwcr .vl-answer { margin: .3rem 0 0 2.25rem; color: #25202d; }
body[data-bw-visual-learning] .bwcr .vl-answer p { margin: 0; }
body[data-bw-visual-learning] .bwcr .vl-chain button[data-vl-reveal-step] { margin-left: 2.25rem; }
body[data-bw-visual-learning] .bwcr .vl-sources { margin: .7rem 0 0; font-size: 1rem; }
body[data-bw-visual-learning] .bwcr .vl-chain-option {
  margin-block: .8rem;
  padding: .9rem;
  background: #f7f4fa;
}
body[data-bw-visual-learning] .bwcr .vl-chain-option h3 { font-size: 1.12rem; }

/* Licensed teaching figures and native dialogs */
body[data-bw-visual-learning] .bwcr .vl-figure {
  margin: 1.6rem 0 2rem;
  border-radius: .85rem;
  background: #ede8f2;
  overflow: clip;
}
body[data-bw-visual-learning] .bwcr .vl-figure > a {
  position: relative;
  display: block;
  color: inherit;
}
body[data-bw-visual-learning] .bwcr .vl-figure > a > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
  background: #171925;
}
body[data-bw-visual-learning] .bwcr .vl-image-action {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .55rem .8rem;
  border-radius: .45rem;
  background: rgba(16, 17, 27, .94);
  color: #fff;
  font-weight: 650;
}
body[data-bw-visual-learning] .bwcr .vl-figure figcaption { padding: 1rem 1.1rem; }
body[data-bw-visual-learning] .bwcr .vl-attribution { display: block; margin-top: .5rem; font-size: 1rem; }
body[data-bw-visual-learning] .vl-image-dialog {
  width: min(94vw, 82rem);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid #746687;
  border-radius: .9rem;
  background: #fffefa;
  color: #191923;
}
body[data-bw-visual-learning] .vl-image-dialog::backdrop { background: rgba(8, 9, 15, .82); }
body[data-bw-visual-learning] .vl-dialog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #b9aec8;
}
body[data-bw-visual-learning] .vl-dialog-scroll { max-height: calc(92vh - 5rem); overflow: auto; padding: 1rem; }
body[data-bw-visual-learning] .vl-dialog-scroll img { display: block; width: 100%; height: auto; object-fit: contain; }

@keyframes vl-replay-pulse {
  0% { opacity: .68; }
  100% { opacity: 1; }
}
body[data-bw-visual-learning] .bwcr .is-replaying :is(.vl-ear-cavity, .vl-ear-fluid, .vl-vial-body, [data-vl-sequence-item].is-active) {
  animation: vl-replay-pulse 180ms ease-out both;
}

@media (max-width: 48rem) {
  body[data-bw-visual-learning] .bwcr .vl-csf-bench,
  body[data-bw-visual-learning] .bwcr .vl-ear-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-bw-visual-learning] .bwcr .vl-ear-reading { min-height: 0; }
}
@media (max-width: 24.6rem) {
  body[data-bw-visual-learning] .bwcr .vl-model { padding: .85rem; border-radius: .75rem; }
  body[data-bw-visual-learning] .bwcr .vl-csf-specimens { gap: .7rem; padding-inline: 0; }
  body[data-bw-visual-learning] .bwcr .vl-vial-body { width: 4rem; height: 9rem; }
  body[data-bw-visual-learning] .bwcr .vl-button-row { flex-direction: column; }
  body[data-bw-visual-learning] .bwcr .vl-button-row button { flex-basis: auto; width: 100%; }
  body[data-bw-visual-learning] .bwcr .vl-ear-stage { padding: .35rem; }
  body[data-bw-visual-learning] .bwcr .vl-ear-legend { display: grid; grid-template-columns: 1fr; }
  body[data-bw-visual-learning] .bwcr .vl-image-action { position: static; width: 100%; justify-content: center; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-bw-visual-learning] .bwcr .vl-vial-body::before,
  body[data-bw-visual-learning] .bwcr .vl-ratio-marker,
  body[data-bw-visual-learning] .bwcr .vl-ear-fluid,
  body[data-bw-visual-learning] .bwcr .vl-ear-tube-lumen { transition: none; }
  body[data-bw-visual-learning] .bwcr .is-replaying * { animation: none !important; }
}

/* Keep the control and its consequence together on a phone. */
body[data-bw-visual-learning] .bwcr .bwcr-intro > p:not(.bwcr-eyebrow) { display:none; }
body[data-bw-visual-learning] .bwcr .bwcr-intro h1 {font-size:clamp(1.65rem,3.4vw,2.5rem);line-height:1.2;}
body[data-bw-visual-learning] .bwcr .vl-model-heading h2 {font-size:1.5rem;line-height:1.25;}
body[data-bw-visual-learning] .bwcr .vl-model {background:radial-gradient(ellipse at 50% 10%,#232339,#10111b 65%);}
body[data-bw-visual-learning] .bwcr .vl-ear-model .vl-button-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-model .vl-button-row button {min-width:0;width:100%;padding:.55rem .25rem;font-size:1rem;line-height:1.3;}
body[data-bw-visual-learning] .bwcr .vl-model-controls {margin-top:.4rem;padding-top:.5rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-reading {padding:.9rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-reading details {margin-bottom:.65rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-legend {display:grid;grid-template-columns:1fr 1fr;font-size:1rem;gap:.45rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-legend span {flex:0 0 .8rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-skull {opacity:.55;}
body[data-bw-visual-learning] .bwcr .vl-ear-canal {fill:#b8a799;stroke:#d4c4ad;stroke-width:12;}
body[data-bw-visual-learning] .bwcr .vl-ear-cavity {fill:#4a3145;stroke:#cf9f96;stroke-width:10;}
body[data-bw-visual-learning] .bwcr .vl-ear-ossicles {fill:none;stroke:#f0e3c3;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
body[data-bw-visual-learning] .bwcr .vl-legend-cavity {background:#cf9f96!important;}
body[data-bw-visual-learning] .bwcr .vl-scale-note {grid-column:1/-1;order:3;font-size:1rem;color:#d7c7f1;margin:0;}
body[data-bw-visual-learning] .bwcr .vl-chain [data-vl-step][hidden] {display:none;}
body[data-bw-visual-learning] .bwcr .vl-chain button[data-vl-reveal-step], body[data-bw-visual-learning] .bwcr .vl-answer {margin-left:0;}
body[data-bw-visual-learning] .bwcr [data-vl-chain-reset] {margin-top:.9rem;background:transparent;color:#4b3369;}
body[data-bw-visual-learning] .bwcr [data-vl-chain-progress] {font-size:1rem;color:#5b466d;}
body[data-bw-visual-learning] .bwcr .vl-image-action {position:static;width:100%;justify-content:center;border-radius:0;}

/* Native disclosure summaries retain contrast in dark models. */
body[data-bw-visual-learning] .bwcr .vl-model details > summary {background:#272335;color:#f8f4ff;border:1px solid #827193;min-height:44px;padding:.7rem .85rem;}
body[data-bw-visual-learning] .bwcr .vl-model button:disabled {opacity:.6;cursor:default;}
body[data-bw-visual-learning] .bwcr .vl-model-controls > .vl-secondary {margin:.35rem .35rem .35rem 0;font-size:1rem;padding:.45rem .6rem;}
body[data-bw-visual-learning] .bwcr .vl-ear-model .vl-button-row button {font-size:1rem;overflow-wrap:normal;word-break:normal;}
body[data-bw-visual-learning] .bwcr .vl-ear-layout {margin-top:.5rem;}
body[data-bw-visual-learning] .bwcr .vl-model-heading > p:last-child {margin-bottom:.8rem;}
body[data-bw-visual-learning] .bwcr .vl-model-limit {font-size:1rem;}

body[data-bw-visual-learning] .bwcr .vl-vial {min-width:0;width:100%;}
body[data-bw-visual-learning] .bwcr .vl-vial label {text-align:center;display:block;font-size:1rem;}
body[data-bw-visual-learning] .bwcr .vl-vial label output {display:block;font-weight:650;}
body[data-bw-visual-learning] .bwcr .vl-csf-specimens {padding:.4rem 0;gap:1rem;}
body[data-bw-visual-learning] .bwcr .vl-csf-bench {margin-top:.5rem;gap:.7rem;}
body[data-bw-visual-learning] .bwcr .vl-ratio-panel {padding:.8rem;}
body[data-bw-visual-learning] .bwcr .vl-ratio-panel p {margin-bottom:.6rem;}

/* Preserve whole words when native text scaling increases the control labels. */
body[data-bw-visual-learning] .bwcr .vl-ear-model .vl-button-row {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));
}
body[data-bw-visual-learning] .bwcr .vl-parallel li { padding:.35rem; }
body[data-bw-visual-learning] .bwcr .vl-parallel [data-vl-sequence-step] {
  width:100%;padding-inline:4px;min-height:44px;
}

/* At enlarged native text sizes, stacked rem insets must not consume the
   phone's text column. Keep font size and vertical touch padding unchanged. */
@media (max-width: 480px) {
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  :is(.vl-model, .vl-ear-reading, .vl-static-example, .vl-ratio-panel, .vl-chain, .vl-chain-option) {
    padding-inline: 4px;
  }
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  :is(.vl-model details, .vl-model summary, .vl-model button, .vl-chain button, [data-answer]) {
    padding-inline: 4px;
    min-inline-size: 0;
  }
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  :is(.vl-parallel li, [data-case], .bwcr-inline-case) {
    padding-inline: 0;
  }
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  .vl-static-example > ol {
    padding-inline: 0;
    list-style-position: inside;
  }
}
@media (max-width: 480px) {
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  .vl-model .vl-static-example dd { margin-inline: 0; }
}
@media (max-width: 480px) {
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  .bwcr-checkpoint { padding-inline: 4px; }
}
@media (max-width: 360px) {
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  .vl-model { padding-inline: 2px; }
}

/* Pair the disclosure surface with the model's light reading text. The base
   lesson disclosure uses ivory, which is not compatible with this dark model. */
body[data-bw-visual-learning] .bwcr .vl-model details {
  background: #1a1c29;
  color: #fffefa;
  border-color: #827193;
}
@media (max-width: 360px) {
  :is(html:is([data-bw-native-reader-ready="1"], [data-bw-app-mode="1"], :has(#bw-native-reader-style)) body[data-bw-visual-learning], body[data-bw-visual-learning].bw-ios-app-mode) .bwcr
  .vl-chain-section { padding-inline: 0; }
}

/* Anatomy route maps: relationships first, source images alongside the teaching. */
body[data-bw-visual-learning] .bwcr .vl-anatomy-layout {
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr);gap:1.2rem;margin-top:1rem;
}
body[data-bw-visual-learning] .bwcr .vl-anatomy-stage {
  padding:.7rem;border:1px solid #4e465d;border-radius:.85rem;background:#171925;
}
body[data-bw-visual-learning] .bwcr .vl-anatomy-stage svg {display:block;width:100%;height:auto;overflow:visible;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-base {fill:#343347;stroke:#8c849a;stroke-width:4;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-stage text {fill:#e8e2ef;font-size:20px;font-weight:650;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment {opacity:.18;transition:opacity 180ms ease-out,stroke-width 180ms ease-out;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.is-active {opacity:1;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-vessel {fill:none;stroke:#d66b72;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-nerve {fill:none;stroke:#d9bb66;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-gate {fill:none;stroke:#9fd1df;stroke-width:9;stroke-linecap:round;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-territory {fill:#7f5d86;stroke:#c49bca;stroke-width:5;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-tooth {fill:#756a82;stroke:#e9e2ef;stroke-width:5;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-segment.vl-palate {fill:none;stroke:#c493b1;stroke-width:18;stroke-linecap:round;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-reading {padding:1rem;border-radius:.85rem;background:#1b1e2c;align-self:stretch;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-reading h3 {margin:0 0 .6rem;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-reading p {margin:0;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-model .vl-button-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
body[data-bw-visual-learning] .bwcr .vl-anatomy-model .vl-button-row button {min-width:0;width:100%;padding:.55rem .45rem;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-model .vl-static-example ol {margin-bottom:0;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-model.is-replaying .vl-anatomy-segment.is-active {animation:vl-replay-pulse 180ms ease-out both;}
@media (max-width:48rem) {
  body[data-bw-visual-learning] .bwcr .vl-anatomy-layout {grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce) {
  body[data-bw-visual-learning] .bwcr .vl-anatomy-segment {transition:none;}
}
/* Native 200% scaling: preserve whole control words and readable dark-model contrast. */
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model {
  padding-inline:4px;
}
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model .vl-button-row {
  grid-template-columns:minmax(0,1fr);
}
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model :is(.vl-model-controls,.vl-anatomy-reading,.vl-static-example,.vl-chain) {
  padding-inline:4px;
}
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model :is(button,summary) {
  padding-inline:4px;
}
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model :is(.vl-anatomy-reading,.vl-static-example) {
  background:#1b1e2c;color:#fffefa;
}
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr .vl-anatomy-model .vl-static-example :is(li,strong) {color:#fffefa;}

/* Native 200% option reasoning needs the phone width for long anatomical terms. */
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr details[data-answer],
html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr details[data-vl-reference] {
  padding-inline:4px;
}
@media (max-width: 360px) {
  html:has(#bw-native-reader-style) body[data-bw-visual-learning] .bwcr :is(.bwcr-checkpoint, details[data-answer], details[data-vl-reference], .vl-chain-option) {
    padding-inline: 0;
  }
}

body[data-bw-visual-learning] .bwcr .vl-route-label-heading {margin:1rem 0 .4rem;font-weight:650;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-legend {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .8rem;padding:0;list-style:none;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-legend li {margin:0;padding:.3rem .1rem;border-bottom:1px solid #625473;color:#fffefa;font-size:1rem;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-legend [hidden] {display:none;}
body[data-bw-visual-learning] .bwcr .vl-anatomy-model details > .vl-static-example {padding:0;border:0;}
@media (max-width:480px) {
  body[data-bw-visual-learning] .bwcr .vl-anatomy-legend {grid-template-columns:minmax(0,1fr);}
}

/* Transparent historical line art needs a light canvas, not dark ink on dark UI. */
body[data-bw-visual-learning] .bwcr .vl-figure > a > img[src^="/img/visual-learning/anatomy/"] {background:#fffefa;}

/* Screening counts remain textual; the positive bar is a redundant visual comparison. */
body[data-bw-visual-learning] .bwcr .vl-screening-model { overflow: visible; }
body[data-bw-visual-learning] .bwcr .vl-screening-model :is(button, input) { min-height: 44px; }
body[data-bw-visual-learning] .bwcr .vl-screening-model button:focus-visible,
body[data-bw-visual-learning] .bwcr .vl-screening-model input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body[data-bw-visual-learning] .bwcr .vl-sc-table-wrap { max-width:100%; overflow-x:auto; }
body[data-bw-visual-learning] .bwcr .vl-screening-model table { width:100%; border-collapse:collapse; font-size:1.125rem; }
body[data-bw-visual-learning] .bwcr .vl-screening-model :is(th,td) { padding:.5rem .25rem; border-bottom:1px solid #736982; text-align:left; overflow-wrap:anywhere; }
body[data-bw-visual-learning] .bwcr .vl-screening-model output { font-variant-numeric:tabular-nums; }
body[data-bw-visual-learning] .bwcr .vl-sc-positive { display:flex; width:100%; height:3rem; margin-top:1rem; border:2px solid #fff; }
body[data-bw-visual-learning] .bwcr .vl-sc-positive [data-sc-true], body[data-bw-visual-learning] .bwcr .vl-sc-key-true { background:#80d0db; }
body[data-bw-visual-learning] .bwcr .vl-sc-positive [data-sc-false], body[data-bw-visual-learning] .bwcr .vl-sc-key-false { background:#eeaf75; }
body[data-bw-visual-learning] .bwcr .vl-sc-key { display:inline-block; width:1rem; height:1rem; margin-inline:.5rem .15rem; vertical-align:middle; }
body[data-bw-visual-learning] .bwcr .vl-screening-model dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:.75rem; }
body[data-bw-visual-learning] .bwcr .vl-screening-model dl div { padding:.6rem; border:1px solid #736982; }
body[data-bw-visual-learning] .bwcr .vl-screening-model dt { font-weight:700; }
body[data-bw-visual-learning] .bwcr .vl-screening-model dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:480px) {
  body[data-bw-visual-learning] .bwcr .vl-screening-model { padding:.75rem; }
  body[data-bw-visual-learning] .bwcr .vl-screening-model table { font-size:1.125rem; }
}

/* Preserve 20px labels in 240px diagrams at >=18px when enlarged text narrows the page. */
body[data-bw-visual-learning] .bwcr .vl-figure:has(img[src^="/img/visual-learning/screening-remaster-20260923/"]) > a { overflow-x:auto; }
body[data-bw-visual-learning] .bwcr .vl-figure img[src^="/img/visual-learning/screening-remaster-20260923/"] { min-width:216px; }
body[data-bw-visual-learning] .bwcr [data-vl-option-chain*="screening-"] [data-vl-step]:last-child .vl-answer p { font-weight:700; }
body[data-bw-visual-learning] .bwcr .vl-screening-model th { background:#282138; color:#fffefa; }
body[data-bw-visual-learning] .bwcr .vl-screening-model label { flex-wrap:wrap; gap:.25rem; }
@media (max-width:480px) {
  body:has(#vl-screening-cohort) .bwcr :is(.bwcr-checkpoint,details[data-answer],details[data-vl-reference],.vl-chain-option) { padding-inline:4px; }
  body:has(#vl-screening-cohort) .bwcr .bwcr-rationales { padding-inline-start:0; list-style:none; }
}

body[data-bw-visual-learning] .bwcr .vl-screening-model [data-sc-worked] > summary { min-height:44px; padding:.55rem .5rem; cursor:pointer; }