/* K07 — Traumatic brain injury page: study bars, qEEG illustration, preparation grid */
.tbi__note { max-width: 44rem; margin-top: 1.5rem; font-size: var(--text-small); line-height: 1.65; color: var(--color-text-2); }
.tbi__note a, .aud__head .text-2 a, .tbi__alert a { text-decoration: underline; text-underline-offset: 3px; }
.aud__head .text-2 + .text-2 { margin-top: .9rem; }
.tbi__pull { margin: 1.75rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--color-ember); font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; letter-spacing: var(--tracking-display); color: var(--color-red); }
.tbi__list-title { margin-bottom: 1rem; font-size: var(--text-small); font-weight: 600; color: var(--color-text-2); }
.aud__steps--stack { grid-template-columns: minmax(0, 1fr) !important; gap: .6rem; }
.aud__steps--stack .aud__step { padding-block: 1rem; }
.tbi__pair { margin-top: 1rem; }
@media (min-width: 768px) { .aud__grid.tbi__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aud__grid.tbi__prep { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Stanford study: one bar per scale, the filled part is what remains one month after */
.tbi-study { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; background: var(--color-bg); box-shadow: 0 0 0 1px rgba(40,10,0,.06); }
.tbi-study__label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-2); }
.tbi-study__rows { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.tbi-study__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: .4rem 1rem; align-items: baseline; }
.tbi-study__name { grid-area: name; font-weight: 600; font-size: var(--text-small); }
.tbi-study__name small { display: inline-block; margin-left: .35rem; font-weight: 400; color: var(--color-text-2); }
.tbi-study__val { grid-area: val; font-size: var(--text-small); white-space: nowrap; color: var(--color-text-2); }
.tbi-study__val strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--color-red); }
.tbi-study__bar { grid-area: bar; position: relative; height: .75rem; border-radius: 999px; background: rgba(40,10,0,.1); overflow: hidden; }
.tbi-study__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--after) / var(--before) * 100%); border-radius: inherit; background: var(--gradient-fire-h); }
.tbi-study__foot { margin-top: 1.25rem; font-size: var(--text-small); color: var(--color-text-2); line-height: 1.55; }
@media (min-width: 768px) {
  .tbi-study__rows li { grid-template-columns: 15rem minmax(0, 1fr) 7.5rem; grid-template-areas: "name bar val"; align-items: center; }
  .tbi-study__val { text-align: right; }
}

/* qEEG colour scale under the animated brain map figure */
.qeeg__scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin-top: 1.5rem; font-size: .75rem; color: var(--color-text-2); }
.qeeg__scale span:last-child { text-align: right; }
.qeeg__scale i { height: .6rem; border-radius: 999px; background: linear-gradient(90deg, #1f4fd1, #2f8de0, #2fb3a0, #3fbf5f 50%, #c9cf3a, #f2b81f, #f08a24, #d7261e); }
.qeeg__scale-note { margin-top: .6rem; font-size: .75rem; text-align: center; color: var(--color-text-2); }
.tbi__bands { margin-top: 1.5rem; }
.tbi__bands .aud__card { padding: 1.1rem 1.25rem; }

/* Medical preparation: the one rule that cannot be missed */
.tbi__alert { max-width: 50rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--color-red); border-radius: 0 14px 14px 0; background: #fff1ee; line-height: 1.6; }
.tbi__alert strong { color: var(--color-red); }

.tbi__photo { margin: 0 0 2.5rem; border-radius: 22px; overflow: hidden; background: var(--color-bg); }
.tbi__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 929; object-fit: cover; }
.tbi__photo figcaption { padding: .75rem 1rem; font-size: var(--text-small); color: var(--color-text-2); }

/* Rewiring figure: a night-dark scene where signals reroute around an injury (driven by js/tbi-rewire.js) */
.rewire { --injury: 1; --strength: 1; }
/* Shared box for the page's motion figures (.mfig): header, dark scene, stage buttons, notes, caption */
.mfig { --sci-ink: var(--color-text); --sci-muted: var(--color-text-2); --sci-line: var(--color-border); --sci-gold: var(--color-accent); margin: 2.5rem 0 0; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-bg-card); color: var(--sci-ink); overflow: hidden; box-shadow: 0 24px 64px -36px rgba(40,10,0,.25); }
.mfig .sci__eyebrow { margin: 0 0 .65rem; color: var(--sci-muted); font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; }
.mfig__scene { background: radial-gradient(ellipse at 50% 55%, #2a140d, #120a08 75%); }
.mfig__scene svg { display: block; width: 100%; height: auto; }
.rewire__mesh path { fill: none; stroke: rgba(255,214,180,.14); stroke-width: 1; }
.rewire__mesh circle { fill: rgba(255,214,180,.32); }
.rewire__mesh .is-lesion { opacity: calc(1 - .8 * var(--injury)); }
.rewire__lesion { opacity: var(--injury); }
.rewire__lesion-edge { fill: none; stroke: #b4462b; stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .7; }
.rewire__link { fill: none; stroke: #ffc27a; stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.rewire__link--broken { stroke-dasharray: 6 calc(10px * var(--injury)); opacity: calc(.85 - .65 * var(--injury)); }
.rewire__grow { fill: none; stroke: url(#rewireRoute); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-width: calc(1.4px + 2.8px * var(--strength)); opacity: calc(.55 + .45 * var(--strength)); filter: drop-shadow(0 0 calc(6px * var(--strength)) rgba(255,150,60,.75)); }
.rewire__sprout { fill: none; stroke: #ff9a4a; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .7; }
.rewire__node { fill: #ffd29a; stroke: #120a08; stroke-width: 2; }
.rewire__node--end { fill: #ffb347; filter: drop-shadow(0 0 8px rgba(255,170,70,.8)); }
.rewire__node--hurt { opacity: calc(1 - .7 * var(--injury)); fill: color-mix(in srgb, #ffd29a calc(100% - 70% * var(--injury)), #6b5b5e); }
.rewire__node--new { fill: #ffb347; }
.rewire__signals circle:first-child { fill: rgba(255,196,110,.22); }
.rewire__signals circle:last-child { fill: #fff3d6; }
.rewire__labels text, .rewire__meter text { fill: rgba(255,232,210,.78); font-family: var(--font-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.rewire__label-lesion { fill: rgba(255,200,180,.7) !important; opacity: var(--injury); transition: opacity var(--duration-normal); }
.rewire__label-route { opacity: 0; transition: opacity var(--duration-normal); }
.rewire[data-stage="2"] .rewire__label-route, .rewire[data-stage="3"] .rewire__label-route { opacity: 1; }
.rewire__meter { opacity: 0; transition: opacity var(--duration-normal); }
.rewire[data-stage="3"] .rewire__meter { opacity: 1; }
.rewire__meter-track { fill: rgba(255,214,180,.15); }
.rewire__meter-fill { fill: #ffb347; }
.mfig__stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 1.2rem 1.5rem 0; }
.mfig__stages button { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem .75rem; border: 1px solid var(--sci-line); border-radius: 10px; background: transparent; color: var(--sci-muted); font-size: .75rem; line-height: 1.35; text-align: left; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.mfig__stages button:hover { color: var(--sci-ink); }
.mfig__stages button span { font-size: .62rem; color: var(--color-ember); }
.mfig__stages button[aria-pressed="true"] { color: var(--color-red); border-color: var(--color-ember); background: color-mix(in srgb, var(--color-ember) 6%, transparent); }
.mfig__notes { display: grid; padding: 1.3rem 1.5rem; }
.mfig__notes p { grid-area: 1 / 1; margin: 0; max-width: 46rem; font-size: .9rem; line-height: 1.65; transition: opacity var(--duration-normal); }
.mfig__notes p[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.mfig__notes strong { display: block; margin-bottom: .4rem; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; letter-spacing: var(--tracking-display); }
.mfig__notes span { color: var(--sci-muted); }
.mfig figcaption { padding: 1rem 1.5rem; border-top: 1px solid var(--sci-line); color: var(--sci-muted); font-size: .72rem; line-height: 1.7; }
.mfig figcaption a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 768px) { .mfig__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mfig .sci__header { padding: 1.2rem; } .mfig .sci__badge { display: none; } .rewire__labels text, .rewire__meter text { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .mfig__notes p, .rewire__label-route, .rewire__meter { transition: none; } }

/* qEEG figure: record, split into bands, compare, read (driven by js/tbi-eeg.js) */
.eegfig { --split: 1; --compare: 1; }
.eeg__skull, .eeg__ear, .eeg__nose { fill: none; stroke: rgba(255,232,210,.55); stroke-width: 1.4; stroke-linejoin: round; }
.eeg__head .eeg__skull { fill: rgba(255,214,180,.04); }
.eeg__ear { fill: #160c09; }
.eeg__el circle:last-child { fill: #ffc27a; stroke: #120a08; stroke-width: 1.5; }
.eeg__el-pulse { fill: rgba(255,170,70,.35); opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity var(--duration-fast), transform var(--duration-normal) var(--ease-out-expo, ease-out); }
.eeg__el.is-active .eeg__el-pulse { opacity: 1; transform: scale(1.4); }
.eeg__caption, .eeg__tl, .eeg__ml { fill: rgba(255,232,210,.78); font-family: var(--font-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.eeg__caption { opacity: calc(1 - var(--compare) * .4); }
.eeg__lead { fill: none; stroke: rgba(255,180,110,.35); stroke-width: 1; stroke-dasharray: 3 4; opacity: calc(1 - 2 * var(--compare)); }
.eeg__traces { opacity: calc(1 - 2 * var(--compare)); }
.eeg__trace { fill: none; stroke: #ffb347; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255,150,60,.5)); }
.eeg__tl--raw { opacity: calc(1 - var(--split)); }
.eeg__tl--band { opacity: var(--split); fill: #ffd29a; }
.eeg__tl tspan { fill: rgba(255,232,210,.55); text-transform: none; letter-spacing: 0; }
.eeg__maps { opacity: calc(1.6 * var(--compare) - .4); }
.eeg__map { --g: 1; }
.eeg__map .eeg__skull { stroke: rgba(255,232,210,.7); }
.eeg__dots { fill: #1d1512; opacity: .7; }
.eeg__dev, .eeg__ref { transform-box: fill-box; transform-origin: center; transition: opacity var(--duration-normal); }
.eeg__dev { transform: scale(var(--g)); opacity: var(--g); }
.eeg__ref { opacity: 0; }
.eegfig[data-view="ref"] .eeg__dev { opacity: 0; }
.eegfig[data-view="ref"] .eeg__ref { opacity: 1; }
.eeg__ml { font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.eeg__ring { fill: none; stroke: #fff3d6; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.eegfig[data-stage="3"][data-view="marked"] .eeg__ring { opacity: .9; animation: eeg-ring 1.8s var(--ease-out-expo, ease-out) infinite; }
@keyframes eeg-ring { 0% { transform: scale(.9); } 50% { transform: scale(1.06); } 100% { transform: scale(.9); } }
.eegfig__views { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem 0; }
.eegfig:not([data-stage="3"]) .eegfig__views { visibility: hidden; }
.eegfig__views button { min-height: 40px; padding: .45rem .9rem; border: 1px solid var(--sci-line); border-radius: 999px; background: transparent; color: var(--sci-muted); font-size: .75rem; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.eegfig__views button:hover { color: var(--sci-ink); }
.eegfig__views button[aria-pressed="true"] { border-color: var(--color-text); background: var(--color-text); color: var(--color-white); }
@media (max-width: 600px) { .eeg__caption, .eeg__tl { font-size: 17px; } .eeg__ml { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .eegfig[data-stage="3"][data-view="marked"] .eeg__ring { animation: none; } .eeg__el-pulse, .eeg__dev, .eeg__ref { transition: none; } }