/* ===== This Term: animated neuron (term-neuron.js) ===== */
.tn {
    --tn-myelin: #fbe9a0;
    --tn-myelin-lit: #ffd31a;
    --tn-highlight: #ffe66d;
    position: relative;
    container-type: inline-size;
}

.tn-stage { position: relative; }
.tn-stage svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Neuron body */
.tn-line { fill: none; stroke: var(--black); stroke-linecap: round; stroke-linejoin: round; }
.tn-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tn.drawn .tn-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease-out var(--d, 0s); }
.tn-soma, .tn-bouton { fill: var(--black); opacity: 0; transition: opacity 0.6s ease var(--d, 0s); }
.tn.drawn .tn-soma, .tn.drawn .tn-bouton { opacity: 1; }
.tn-bouton.fire { fill: var(--tn-myelin-lit); }

/* Myelin segments (weeks) */
.tn-seg { opacity: 0; transition: opacity 0.35s ease var(--d, 0s); cursor: default; }
.tn.segs .tn-seg { opacity: 1; }
.tn-seg .tn-seg-body { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease; }
.tn-seg rect, .tn-seg ellipse { fill: var(--tn-myelin); stroke: var(--black); stroke-width: 3.5; transition: fill 0.3s ease; }
.tn-seg text { font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 19px; fill: var(--black); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tn-seg.lit rect, .tn-seg.lit ellipse { fill: var(--tn-myelin-lit); }
.tn-seg.has-event { cursor: pointer; }
.tn-seg.has-event:hover .tn-seg-body, .tn-seg.active .tn-seg-body { transform: scale(1.12); }
.tn-seg.next .tn-seg-body { animation: tn-throb 1.8s ease-in-out infinite; }
@keyframes tn-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Action potential */
.tn-pulse { fill: var(--tn-myelin-lit); opacity: 0; transition: opacity 0.2s ease; }
.tn-pulse.on { opacity: 1; }

/* Connectors */
.tn-conn { fill: none; stroke: var(--black); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s ease-out, opacity 0.3s ease; }
.tn-conn.show { stroke-dashoffset: 0; }

/* Event cards */
.tn-card {
    position: absolute;
    display: block;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 0.7em 0.9em;
    font-size: clamp(10px, 1.13cqi, 14px);
    line-height: 1.35;
    color: var(--black);
    text-decoration: none;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.25s ease;
    pointer-events: none;
}
.tn-card.above { transform-origin: 50% 120%; }
.tn-card.below { transform-origin: 50% -20%; }
.tn-card.show { opacity: 1; transform: none; pointer-events: auto; }
.tn-card > * { transition: opacity 0.3s ease; }
.tn-card.past { border-color: #8a9bb0; }
.tn-entry.past { opacity: 0.55; filter: grayscale(1); }
.tn-entry + .tn-entry { border-top: 1px dashed var(--black); margin-top: 0.6em; padding-top: 0.6em; }
.tn-date { background: var(--tn-highlight); font-weight: bold; padding: 0 0.15em; }
.tn-title { font-weight: bold; text-decoration: underline; text-underline-offset: 2px; }
.tn-sub { font-size: 0.9em; margin-top: 0.3em; }
.tn-tag { position: absolute; top: -0.85em; right: 0.6em; background: var(--black); color: var(--white); font-size: 0.75em; letter-spacing: 2px; padding: 0.1em 0.5em; font-weight: bold; }

/* Hover / tap focus */
.tn.focus .tn-card.show:not(.active) { border-color: #c5ced9; }
.tn.focus .tn-card.show:not(.active) > * { opacity: 0.25; }
.tn.focus .tn-conn.show:not(.active) { opacity: 0.25; }
.tn-card.show.active > * { opacity: 1; }
.tn-card.show.active { border-color: var(--black); box-shadow: 5px 5px 0 var(--black); transform: translateY(-3px); z-index: 2; }

.tn-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: -1.5rem; margin-bottom: 1rem; }
.tn-term { margin: 0; font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.tn-term span, .tn-term strong { white-space: nowrap; }
.tn-term strong { background: var(--tn-highlight); padding: 0 0.3em; opacity: 1; }
.tn-replay {
    background: transparent; border: 2px solid var(--black); color: var(--black);
    font-family: monospace; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
    padding: 0.4rem 0.9rem; cursor: pointer; transition: var(--transition);
}
.tn-replay:hover { background: var(--black); color: var(--white); }

/* ===== Narrow screens: vertical axon ===== */
.tn-list { display: none; list-style: none; position: relative; margin: 0; padding: 0; }
.tn-list::before { content: ''; position: absolute; left: 34px; top: 30px; bottom: 10px; width: 6px; background: var(--black); border-radius: 3px; }
.tn-row { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 46px; padding: 0.35rem 0; }
.tn-pill {
    position: relative; z-index: 1; flex: 0 0 74px; text-align: center;
    background: var(--tn-myelin); border: 3px solid var(--black); border-radius: 12px;
    font-weight: bold; font-size: 0.95rem; line-height: 1.9; transition: background 0.3s ease;
}
.tn-row.soma .tn-pill { border-radius: 50%; line-height: 2.6; background: var(--tn-myelin); box-shadow: 0 0 0 9px var(--black); margin: 12px 0; }
.tn-row.in .tn-pill { background: var(--tn-myelin-lit); }
.tn-stack { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.tn-row .tn-card { position: relative; font-size: 0.85rem; transform: translateX(-12px); transform-origin: left center; }
.tn-row.in .tn-card { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.15s; }
.tn-row:not(.has-event) { min-height: 34px; }
.tn-row:not(.has-event) .tn-pill { opacity: 0.7; }

@container (max-width: 860px) {
    .tn-stage, .tn-replay { display: none; }
    .tn-list { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .tn *, .tn *::before { transition: none !important; animation: none !important; }
}