/* Tau protein lesson. All rules scoped under .tau-* */

.tau-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tau-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.tau-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.tau-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.tau-t.dim { fill: var(--dim); font-size: 12px; }
.tau-keys { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.tau-keys span { display: inline-flex; align-items: center; gap: 6px; }
.tau-keys b { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.tau-keys .tr { background: var(--mint); height: 7px; }
.tau-keys .cl { background: var(--violet-bright); width: 7px; }
.tau-keys .cg { background: var(--gold); border-radius: 50%; }
.tau-keys .tg { background: #FF8A8A; border-radius: 50%; width: 8px; height: 8px; }
.tau-keys .c { background: var(--gold); border-radius: 50%; }

/* the nerve cell */
.tau-mem { fill: rgba(169,155,255,.10); stroke: var(--violet-bright); stroke-width: 2; }
.tau-nuc { fill: rgba(169,155,255,.28); }
.tau-seg rect { fill: var(--mint); opacity: .9; }
.tau-seg { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.tau-clip rect { fill: var(--violet-bright); stroke: var(--bg); stroke-width: 1.5; }
.tau-clip { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .6s; }
.tau-clip.gone { transform: translate(0, -20px) rotate(35deg); opacity: .55; }
.tau-tag { fill: #FF8A8A; opacity: 0; transition: opacity .2s; }
.tau-tag.on { opacity: 1; }
.tau-cargo { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.tau-nerve.stuck .tau-cargo { fill: #FF8A8A; stroke: var(--red); }
.tau-knot path { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.tau-nerve.knot .tau-knot path { opacity: 1; }
.tau-nerve.knot .tau-clip.gone { opacity: 0; transform: translate(-60px, 10px) scale(.4); }
.tau-io { display: flex; gap: 10px; width: 100%; }
.tau-io span { flex: 1; text-align: center; font-size: 13px; color: var(--dim); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 8px; line-height: 1.3; }
.tau-io b { display: block; color: var(--text); font-size: 14px; }

/* brain scans */
.tau-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.tau-one { width: 78%; }
.tau-brain { display: block; width: 100%; height: auto; }
.tau-area { fill: rgba(169,155,255,.10); stroke: var(--line); stroke-width: 1; }
.tau-area.lit { fill: rgba(252,192,80,.62); }
.tau-out { fill: none; stroke: var(--violet-bright); stroke-width: 2; }
.tau-t.sm { font-size: 16px; fill: var(--text); }
.tau-t.hd { font-size: 17px; font-weight: 800; fill: var(--dim); }
.tau-brain.ping .tau-out { stroke: var(--gold); stroke-width: 3; }

/* tau alone */
.tau-fam { width: 100%; }
.tau-fc { display: flex; flex-direction: column; gap: 8px; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; }
.tau-fc b { font-size: 16px; }
.tau-fc span { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.tau-fc .yes { background: rgba(252,192,80,.18); color: var(--gold); }
.tau-fc .no { background: var(--raised); color: var(--dim); }

/* 111 brains */
.tau-dots { display: grid; grid-template-columns: repeat(12, minmax(0, 16px)); gap: 5px; justify-content: center; }
.tau-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--raised); border: 1.5px solid var(--line-strong); }
.tau-dots i.c { background: var(--gold); border-color: var(--gold-deep); }

@media (max-height: 700px) {
  .tau-dots { grid-template-columns: repeat(12, minmax(0, 13px)); gap: 4px; }
  .tau-one { width: 62%; }
}