/* Prion lesson. All rules scoped under .pri-* */

.pri-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pri-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.pri-keys { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.pri-keys span { display: inline-flex; align-items: center; gap: 6px; }
.pri-keys b { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pri-keys .g { background: var(--violet-bright); }
.pri-keys .x { background: var(--gold); }

/* the steps of the 1967 test */
.pri-steps { display: flex; align-items: stretch; gap: 4px; width: 100%; }
.pri-steps > i { align-self: center; font-style: normal; color: var(--faint); font-size: 18px; }
.pri-st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); text-align: center; }
.pri-st b { font-size: 13px; line-height: 1.25; color: var(--text); }
.pri-ic { width: 40px; height: 40px; }
.pri-ic .vial { fill: none; stroke: var(--dim); stroke-width: 2; }
.pri-ic .goo { fill: #FF8A8A; }
.pri-ic .ray { fill: var(--gold); }
.pri-q { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 18px var(--sans); color: var(--dim); border: 2px dashed var(--faint); transition: all .3s; }
.pri-q.on { font-size: 13px; color: #FF8A8A; border: 2px solid var(--red); background: rgba(216,85,85,.15); }

/* the protein field */
.pri-field { display: grid; grid-template-columns: repeat(5, 54px); gap: 8px; justify-content: center; }
.pri-p { width: 54px; height: 54px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; transition: background .3s, border-color .3s, opacity .3s; }
.pri-p svg { width: 100%; height: 100%; display: block; }
.pri-p path { fill: none; stroke: var(--violet-bright); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pri-p circle { fill: var(--violet-bright); }
.pri-p.bad { background: rgba(252,192,80,.14); border-color: var(--gold-deep); }
.pri-p.bad path { stroke: var(--gold); }
.pri-p.bad circle { fill: var(--gold); }
.pri-p.wrong { border-color: var(--red); }
.pri-p.off { opacity: .4; }
.pri-p.pri-pp { animation: pri-pop .45s ease-out; }
@keyframes pri-pop { 40% { transform: scale(1.15); } }
.pri-none .pri-p:not(.bad) { background: none; border-style: dashed; }
.pri-none .pri-p:not(.bad) svg { opacity: 0; }
.pri-count { font-size: 14px; font-weight: 600; color: var(--dim); }
.pri-count b { font: 700 20px var(--mono); color: var(--gold); }
.pri-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 320px; }
.pri-rounds { display: flex; gap: 4px; }
.pri-rounds span { width: 24px; height: 26px; display: grid; place-items: center; border-radius: 8px; font: 700 13px var(--mono); color: var(--faint); border: 1px solid var(--line); transition: all .25s; }
.pri-rounds span.on { color: var(--gold); border-color: var(--gold); }

.pri-photo { width: 100%; max-width: 360px; border-radius: 14px; overflow: hidden; }
.pri-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* kuru timeline */
.pri-tlbox { width: 100%; }
.pri-tl { display: block; width: 100%; height: auto; }
.pri-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.pri-t.dim { fill: var(--dim); font-size: 12px; }
.pri-t.start { text-anchor: start; }
.pri-feast { fill: var(--violet-bright); }
.pri-dots circle { fill: var(--gold); }
.pri-axis { stroke: var(--line-strong); stroke-width: 2; }

/* the feed loop */
.pri-cow { width: 100%; }
.pri-loop { display: flex; align-items: center; gap: 4px; }
.pri-loop span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.25; padding: 14px 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.pri-loop i { font-style: normal; color: var(--faint); }
.pri-loop.cut span:nth-of-type(2) { border-color: var(--red); color: #FF8A8A; text-decoration: line-through; }

.pri-two { display: flex; gap: 10px; width: 100%; }
.pri-two span { flex: 1; text-align: center; padding: 16px 8px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); font-size: 13px; color: var(--dim); }
.pri-two b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }

@media (max-height: 700px) {
  .pri-field { grid-template-columns: repeat(5, 46px); gap: 6px; }
  .pri-p { width: 46px; height: 46px; padding: 5px; }
  .pri-photo { max-width: 280px; }
}