/*
 * bio-visuals.css — 生物课堂教学示意图（配合 bio-visuals.js）。
 *
 * 只读官网设计变量（--ql-*），再包一层 --bv-* 令牌并带兜底值：深色、浅色两套
 * 主题共用同一份规则，脱离站点样式单独加载也不会出现白底黑字/低对比。
 * 所有类名以 bv- 前缀隔离，不产生全局污染。
 */

.bv-visual {
  /* 主题令牌（深色为默认，与 site.css 的 :root 一致）。 */
  --bv-ink-hi: var(--ql-ink-hi, #efe9df);
  --bv-ink-mid: var(--ql-ink-mid, #a89f90);
  --bv-ink-low: var(--ql-ink-low, #857c6c);
  --bv-gold: var(--ql-gold-500, #c9a24a);
  --bv-gold-soft: var(--ql-gold-300, #f3dc9e);
  --bv-gold-deep: var(--ql-gold-700, #8f6f2e);
  --bv-gold-text: var(--ql-gold-300, #f3dc9e);
  --bv-gold-wash: rgba(201, 162, 74, 0.14);
  --bv-cinnabar: var(--ql-cinnabar, #c3402f);
  --bv-cinnabar-hi: var(--ql-cinnabar-hi, #e0684f);
  --bv-hairline: rgba(239, 233, 223, 0.16);
  --bv-wash: rgba(239, 233, 223, 0.05);
  --bv-plate: rgba(239, 233, 223, 0.03);
  --bv-panel: var(--ql-surface, #16130f);
  --bv-bg: var(--ql-bg, #0d0b09);
  --bv-ok: #63c39a;
  --bv-ok-wash: rgba(99, 195, 154, 0.12);
  --bv-bad: #e0684f;
  --bv-bad-wash: rgba(195, 64, 47, 0.16);

  --bv-metal: #b3ac9d;
  --bv-metal-mid: #6e675b;
  --bv-metal-deep: #3d382f;
  --bv-glass: rgba(127, 168, 216, 0.14);

  --bv-cell-wall: #94b07c;
  --bv-cell-wall-fill: rgba(148, 176, 124, 0.16);
  --bv-membrane: #d9b963;
  --bv-cytoplasm: rgba(217, 185, 99, 0.09);
  --bv-nucleus: #b98ac9;
  --bv-nucleus-fill: rgba(185, 138, 201, 0.18);
  --bv-nucleolus: #7d5f8c;
  --bv-vacuole: #7fa8d8;
  --bv-vacuole-fill: rgba(127, 168, 216, 0.16);
  --bv-chloroplast: #6fb07a;
  --bv-chloroplast-fill: rgba(111, 176, 122, 0.2);
  --bv-mito: #d08a5a;
  --bv-mito-fill: rgba(208, 138, 90, 0.18);

  --bv-sun: #e0b25c;
  --bv-sun-fill: rgba(224, 178, 92, 0.22);
  --bv-co2: #8fa8bd;
  --bv-oxygen: #7fc8c0;
  --bv-organic: #d3a15b;
  --bv-organ: #c98f4f;
  --bv-organ-fill: rgba(201, 143, 79, 0.18);
  --bv-organ-deep: #8d6132;
  --bv-tube: #b5793f;
  --bv-tube-fill: rgba(181, 121, 63, 0.18);
  --bv-liver: #a86a4e;
  --bv-liver-fill: rgba(168, 106, 78, 0.22);
  --bv-juice: #cbb06a;

  --bv-blood-art: #cf5a45;
  --bv-blood-art-fill: rgba(207, 90, 69, 0.2);
  --bv-blood-ven: #6f9fd8;
  --bv-blood-ven-fill: rgba(111, 159, 216, 0.18);
  --bv-lung: #c98f9b;
  --bv-lung-fill: rgba(201, 143, 155, 0.16);

  --bv-nerve: #d9b963;
  --bv-nerve-fill: rgba(217, 185, 99, 0.16);
  --bv-cord: #c9a24a;
  --bv-cord-fill: rgba(201, 162, 74, 0.14);
  --bv-dna: #d9b963;
  --bv-bacteria: #8fb08a;
  --bv-bacteria-fill: rgba(143, 176, 138, 0.16);
  --bv-capsule: rgba(180, 200, 170, 0.34);
  --bv-gene-a: #d9a05a;
  --bv-gene-b: #7fa8d8;

  box-sizing: border-box;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 0.875rem;
  background: var(--bv-panel);
  color: var(--bv-ink-hi);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.bv-visual *,
.bv-visual *::before,
.bv-visual *::after {
  box-sizing: border-box;
}

/* 浅色主题：把白色 alpha 洗色换成暖墨洗色，并加深图表用色保证对比。 */
html[data-ql-theme='light'] .bv-visual {
  --bv-gold-text: var(--ql-gold-700, #8f6f2e);
  --bv-gold-wash: rgba(143, 111, 46, 0.12);
  --bv-hairline: rgba(34, 29, 21, 0.16);
  --bv-wash: rgba(34, 29, 21, 0.05);
  --bv-plate: rgba(34, 29, 21, 0.03);
  --bv-ok: #1f7a54;
  --bv-ok-wash: rgba(31, 122, 84, 0.1);
  --bv-bad: #b23a2a;
  --bv-bad-wash: rgba(178, 58, 42, 0.1);

  --bv-metal: #6d6658;
  --bv-metal-mid: #a9a294;
  --bv-metal-deep: #d5cebe;
  --bv-glass: rgba(51, 104, 159, 0.12);

  --bv-cell-wall: #4f6b39;
  --bv-cell-wall-fill: rgba(79, 107, 57, 0.14);
  --bv-membrane: #8a6320;
  --bv-cytoplasm: rgba(138, 99, 32, 0.08);
  --bv-nucleus: #7b4f8a;
  --bv-nucleus-fill: rgba(123, 79, 138, 0.14);
  --bv-nucleolus: #573563;
  --bv-vacuole: #33689f;
  --bv-vacuole-fill: rgba(51, 104, 159, 0.12);
  --bv-chloroplast: #2f6b3f;
  --bv-chloroplast-fill: rgba(47, 107, 63, 0.16);
  --bv-mito: #a55e33;
  --bv-mito-fill: rgba(165, 94, 51, 0.14);

  --bv-sun: #9a6410;
  --bv-sun-fill: rgba(154, 100, 16, 0.14);
  --bv-co2: #4a6b82;
  --bv-oxygen: #22756c;
  --bv-organic: #8a5a18;
  --bv-organ: #8f5a24;
  --bv-organ-fill: rgba(143, 90, 36, 0.14);
  --bv-organ-deep: #6a3f14;
  --bv-tube: #8a5121;
  --bv-tube-fill: rgba(138, 81, 33, 0.14);
  --bv-liver: #7c3f2a;
  --bv-liver-fill: rgba(124, 63, 42, 0.16);
  --bv-juice: #8a6a1c;

  --bv-blood-art: #b23a2a;
  --bv-blood-art-fill: rgba(178, 58, 42, 0.16);
  --bv-blood-ven: #33689f;
  --bv-blood-ven-fill: rgba(51, 104, 159, 0.14);
  --bv-lung: #9c5465;
  --bv-lung-fill: rgba(156, 84, 101, 0.14);

  --bv-nerve: #8a6320;
  --bv-nerve-fill: rgba(138, 99, 32, 0.12);
  --bv-cord: #7a5a18;
  --bv-cord-fill: rgba(122, 90, 24, 0.12);
  --bv-dna: #8a6320;
  --bv-bacteria: #3d6b48;
  --bv-bacteria-fill: rgba(61, 107, 72, 0.14);
  --bv-capsule: rgba(90, 120, 80, 0.22);
  --bv-gene-a: #9a6410;
  --bv-gene-b: #33689f;
}

/* 标题行 */
.bv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.bv-title {
  margin: 0;
  color: var(--bv-ink-hi);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bv-badge {
  flex: none;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 999px;
  color: var(--bv-gold-text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.bv-badge--kind {
  color: var(--bv-ink-low);
}

/* 图示主体 */
.bv-stage {
  margin-top: 0.7rem;
}

.bv-stage > * + * {
  margin-top: 0.6rem;
}

.bv-plot {
  position: relative;
  max-width: 32rem;
  margin-inline: auto;
}

.bv-svg {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* 覆盖在 SVG 上的原生按钮：视觉仍由 SVG 承担，命中/朗读/键盘都走 <button>。 */
.bv-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: transparent;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease;
}

.bv-hit:hover {
  background: var(--bv-gold-wash);
}

.bv-hit:focus-visible {
  outline: 2px solid var(--bv-gold);
  outline-offset: 1px;
  background: var(--bv-gold-wash);
}

/* 结构高亮：SVG 内所有被选中部件描金并加柔光。 */
.bv-part {
  transition: opacity 160ms ease, filter 160ms ease;
}

.bv-part.bv-on,
.bv-part.bv-on :not(text) {
  stroke: var(--bv-gold) !important;
  stroke-width: 2.4px !important;
}

/* 文字只换色、不加描边，避免小字号标签被描粗糊在一起。 */
.bv-part.bv-on text {
  stroke: none !important;
  stroke-width: 0 !important;
}

.bv-part.bv-on {
  filter: drop-shadow(0 0 4px rgba(201, 162, 74, 0.55));
}

/* 胶囊按钮（结构名 / 视图切换 / 消化道顺序） */
.bv-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bv-chip {
  margin: 0;
  padding: 0.3rem 0.68rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--bv-ink-mid);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.bv-chip:hover {
  border-color: var(--bv-gold-deep);
  color: var(--bv-ink-hi);
}

.bv-chip[aria-pressed='true'] {
  border-color: var(--bv-gold);
  background: var(--bv-gold-wash);
  color: var(--bv-gold-text);
}

.bv-chip:focus-visible,
.bv-step:focus-visible,
.bv-opt:focus-visible,
.bv-visual :focus-visible {
  outline: 2px solid var(--bv-gold);
  outline-offset: 2px;
}

/* 结构说明 */
.bv-detail {
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--bv-gold);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--bv-wash);
  min-height: 2.6rem;
}

.bv-detail-hint {
  margin: 0;
  color: var(--bv-ink-low);
  font-size: 0.78rem;
  line-height: 1.7;
}

.bv-detail-name {
  margin: 0;
  color: var(--bv-ink-hi);
  font-size: 0.84rem;
  font-weight: 600;
}

.bv-detail-desc {
  margin: 0.15rem 0 0;
  color: var(--bv-ink-mid);
  font-size: 0.8rem;
  line-height: 1.7;
}

/* 补充说明、反应式 */
.bv-note {
  margin: 0;
  color: var(--bv-ink-low);
  font-size: 0.75rem;
  line-height: 1.65;
}

.bv-formula {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--bv-hairline);
  border-radius: 0.5rem;
  background: var(--bv-plate);
  color: var(--bv-ink-mid);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

/* 消化道顺序 */
.bv-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.bv-step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--bv-ink-mid);
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bv-step-num {
  flex: none;
  min-width: 1rem;
  color: var(--bv-gold-text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.68rem;
  text-align: center;
}

.bv-step:hover {
  border-color: var(--bv-gold-deep);
  color: var(--bv-ink-hi);
}

.bv-step[aria-pressed='true'] {
  border-color: var(--bv-gold);
  background: var(--bv-gold-wash);
  color: var(--bv-gold-text);
}

.bv-order-arrow {
  color: var(--bv-ink-low);
  font-size: 0.7rem;
}

/* 图示内嵌小测 */
.bv-check {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--bv-hairline);
}

.bv-check-q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  color: var(--bv-ink-hi);
  font-size: 0.875rem;
  font-weight: 600;
}

.bv-check-tag {
  flex: none;
  padding: 0.02rem 0.4rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 0.3rem;
  color: var(--bv-gold-text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.bv-opts {
  display: grid;
  gap: 0.4rem;
}

.bv-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.68rem;
  border: 1px solid var(--bv-hairline);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--bv-ink-mid);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.bv-opt:hover:not([aria-disabled='true']) {
  border-color: var(--bv-gold-deep);
  background: var(--bv-wash);
  color: var(--bv-ink-hi);
}

.bv-opt[aria-pressed='true'] {
  border-color: var(--bv-gold);
}

.bv-opt[aria-disabled='true'] {
  cursor: default;
}

.bv-opt.bv-correct {
  border-color: var(--bv-ok);
  background: var(--bv-ok-wash);
  color: var(--bv-ink-hi);
}

.bv-opt.bv-wrong {
  border-color: var(--bv-bad);
  background: var(--bv-bad-wash);
  color: var(--bv-ink-hi);
}

.bv-opt-key {
  flex: none;
  width: 1.05rem;
  color: var(--bv-gold-text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.bv-opt.bv-correct .bv-opt-key {
  color: var(--bv-ok);
}

.bv-opt.bv-wrong .bv-opt-key {
  color: var(--bv-bad);
}

.bv-check-fb:empty {
  display: none;
}

.bv-check-fb {
  margin-top: 0.55rem;
}

.bv-check-res {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.bv-check-res.bv-ok {
  color: var(--bv-ok);
}

.bv-check-res.bv-bad {
  color: var(--bv-bad);
}

.bv-check-exp {
  margin: 0.25rem 0 0.55rem;
  color: var(--bv-ink-mid);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.bv-check-retry {
  margin-top: 0.2rem;
}

/* 说明文字 */
.bv-caption {
  margin: 0.75rem 0 0;
  color: var(--bv-ink-mid);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* 宿主可以把卡片外壳去掉，只保留图示本身。 */
.bv-visual[data-flat] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 动画：血流、物质流动。 */
@keyframes bv-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -24;
  }
}

.bv-flow {
  animation: bv-flow 1.6s linear infinite;
}

/* 键盘焦点统一使用品牌金。 */
.bv-visual :focus-visible {
  outline: 2px solid var(--bv-gold);
  outline-offset: 2px;
}

/* 尊重减少动效偏好。 */
@media (prefers-reduced-motion: reduce) {
  .bv-visual *,
  .bv-visual *::before,
  .bv-visual *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .bv-flow {
    animation: none !important;
  }
}

@media (max-width: 30rem) {
  .bv-visual {
    padding: 0.85rem 0.8rem 0.95rem;
  }

  .bv-visual[data-flat] {
    padding: 0;
  }

  .bv-chip,
  .bv-step {
    font-size: 0.72rem;
  }

  .bv-caption {
    font-size: 0.78rem;
  }
}