/* Prairie vole lesson. All rules scoped under .pv-* */

.pv-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pv-note { font-size: 12px; color: var(--faint); text-align: center; }
.pv-hero img { display: block; width: 100%; max-width: 340px; max-height: 34vh; object-fit: contain; margin: 0 auto; }
.pv-hero.pv-big img { max-width: 400px; max-height: 42vh; }
.pv-hero.pv-brainhero img { border-radius: 14px; max-width: 380px; max-height: 38vh; }

/* the traps */
.pv-field { display: block; width: 100%; max-width: 400px; height: auto; max-height: 38vh; touch-action: manipulation; }
.pv-grass { fill: #2F5A3A; }
.pv-tufts { fill: none; stroke: #4F8A57; stroke-width: 2; stroke-linecap: round; }
.pv-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
.pv-ask .pv-trap:not(.open) { cursor: pointer; }
.pv-ask .pv-trap:not(.open) .pv-hit { stroke: var(--gold); stroke-dasharray: 6 5; }
.pv-trap.pv-mark .pv-hit { stroke: #4C8DFF; stroke-width: 3; }
.pv-box { transition: opacity .3s; }
.pv-trap.open .pv-box { opacity: .3; }
.pv-num { fill: #1A2136; stroke: var(--line-strong); stroke-width: 1.5; }
.pv-numt { font: 800 16px var(--sans); fill: var(--text); text-anchor: middle; }
.pv-tag { stroke: #fff; stroke-width: 1.5; }
.pv-tagt { font: 800 16px var(--sans); fill: #fff; text-anchor: middle; }
.pv-empty { font: 600 16px var(--sans); fill: #CFE6D2; text-anchor: middle; }
.pv-key { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.pv-key span { display: flex; align-items: center; gap: 6px; }
.pv-log { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.pv-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.pv-row b { flex: none; width: 58px; font: 700 12px var(--sans); color: var(--dim); }
.pv-row span { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-chip { display: inline-flex; gap: 3px; padding: 3px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.pv-chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--sans); color: #fff; font-style: normal; border: 1.5px solid #fff; }

/* the pair */
.pv-facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; }
.pv-facts span { padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold); font: 700 13px var(--sans); color: var(--text); }

/* the brain */
.pv-sc > .compare { width: 100%; max-width: 380px; }
.pv-sc > .compare .cmp { touch-action: none; }
.pv-sc > .compare .wiper { pointer-events: none; }
.pv-spot { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0; border-radius: 50%; border: 2.5px solid #fff; background: rgba(255,255,255,.08); z-index: 3; cursor: pointer; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.pv-spot.right { border-color: var(--mint); background: rgba(63,214,154,.18); }
.pv-spot.wrong { border-color: var(--red); background: rgba(216,85,85,.2); }
.pv-spot.off { opacity: .35; }
.pv-lab { position: absolute; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: var(--mint); color: var(--mint-ink); font: 800 12px var(--sans); white-space: nowrap; z-index: 4; }

/* the gene */
.pv-lab-svg { display: block; width: 100%; max-width: 380px; height: auto; max-height: 46vh; touch-action: none; }
.pv-ask .pv-syr { cursor: grab; }
.pv-grab { fill: transparent; }
.pv-miss { fill: none; stroke: var(--red); stroke-width: 3; opacity: 0; transition: opacity .2s; }
.pv-miss.on { opacity: 1; }
.pv-cap { font: 600 13px var(--sans); fill: var(--dim); text-anchor: end; }
.pv-bars { display: flex; gap: 22px; justify-content: center; width: 100%; max-width: 340px; }
.pv-bg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pv-bg b { font: 700 13px var(--sans); color: var(--text); text-align: center; }
.pv-cols { display: flex; align-items: flex-end; gap: 10px; height: 26vh; max-height: 190px; padding: 0 10px; border-bottom: 2px solid var(--line-strong); }
.pv-b { display: block; width: 38px; height: 0; border-radius: 8px 8px 0 0; transition: height .8s cubic-bezier(.4,0,.2,1); }
.pv-bars.on .pv-b { height: var(--h); }
.pv-bp { background: var(--gold); }
.pv-bs { background: #7A86A8; }
.pv-bkey i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* knockout */
.pv-badge { padding: 6px 12px; border-radius: 999px; background: var(--raised); border: 1px dashed var(--red); font: 700 13px var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .pv-field { max-height: 27vh; }
  .pv-row { min-height: 24px; }
  .pv-chip i { width: 18px; height: 18px; }
  .pv-hero img { max-height: 30vh; }
  .pv-lab-svg { max-height: 40vh; }
}