/* SR-71 Blackbird Lab (/blackbird): a dark immersive surface for the hero and the experiment, the shared light dossier
   styles (/aircraft/dossier.css) for the text. Tokens from /style.css. */
.bb-page{background:var(--paper)}

/* ---------- hero (dark) ---------- */
.bb-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:60px 7% 64px;background:var(--navy);color:#eef2f5}
.bb-hero .eyebrow{color:#bdcbd8;margin-bottom:22px}
.bb-hero .educational,.bb-lab .educational{color:#f0c9a4}
.bb-hero h1{color:#fff}
.bb-hero h1 em{color:#a4b8c8}
.bb-hero .lede{color:#d5dee6}
.bb-entries{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:12px}
.bb-entry{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 20px;background:#132230;border:1px solid #2b3d4f;color:#eef2f5;transition:border-color .2s,transform .3s var(--ease)}
.bb-entry:hover{border-color:#e0a072;transform:translateX(3px)}
.bb-entry .entry-num{grid-row:1/3;font-size:12px;font-weight:700;letter-spacing:.14em;color:#e0a072;padding-top:4px}
.bb-entry strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.15;color:#fff}
.bb-entry span:last-child{font-size:14px;line-height:1.55;color:#c4d0da}
.bb-photo{margin:0;background:#0b1520;border:1px solid #2b3d4f;padding:12px}
.bb-photo img{display:block;width:100%;height:auto;aspect-ratio:1200/940;object-fit:cover}
.bb-photo figcaption{font-size:11.5px;line-height:1.7;color:#c4d0da;margin-top:10px}

/* ---------- the experiment (dark) ---------- */
.bb-lab{background:#0b1520;color:#eef2f5;padding:56px 7% 60px}
.bb-lab-head{max-width:820px}
.bb-lab .eyebrow{color:#bdcbd8;margin-bottom:14px}
.bb-lab h2{color:#fff}
.bb-lab h2 em{color:#a4b8c8}
.bb-lab .lede{color:#d5dee6}
.bb-lab-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);gap:28px;align-items:start;margin-top:30px}
.inlet-figure{margin:0;background:#0b1520;border:1px solid #2b3d4f;min-width:0}
.inlet-figure .svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.inlet-figure svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.inlet-figure figcaption{padding:12px 16px 14px;font-size:12px;line-height:1.7;color:#c4d0da;border-top:1px solid #2b3d4f}
.inlet-figure figcaption p+p{margin-top:8px}
.highlight-legend:empty{display:none}
.highlight-legend{color:#f0c9a4;font-weight:700}
.bb-label{fill:#c4d0da;font-size:13px}
.bb-label.strong{fill:#eef2f5;font-weight:700}
.bb-label.dim{fill:#6f8496;font-size:11px}
.bb-part{transition:opacity .25s}
#inlet-svg.has-highlight .bb-part:not(.is-hot){opacity:.28}
#inlet-svg .bb-part.is-hot{opacity:1}
#inlet-svg .bb-part.is-hot path,#inlet-svg .bb-part.is-hot rect,#inlet-svg .bb-part.is-hot circle{stroke:#e0a072;stroke-width:2.5}
#inlet-svg .bb-part.is-hot line{stroke:#ffd9b8}
#inlet-svg[data-state=unstarted] #shock-terminal-bow path{stroke:#ffb4a8}
.part-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.part-buttons button{min-height:44px;padding:8px 12px;border:1px solid #4a5d70;background:#132230;color:#eef2f5;font-size:13px;line-height:1.3}
.part-buttons button:hover{border-color:#e0a072;color:#fff}
.part-buttons button[aria-pressed=true]{background:#e0a072;color:#101c29;border-color:#e0a072;font-weight:700}
.part-buttons button:focus-visible,.bb-lab input:focus-visible,.bb-lab button:focus-visible,.bb-lab summary:focus-visible{outline:3px solid #8fc4ea;outline-offset:3px}

.inlet-controls{display:grid;gap:18px;align-content:start;min-width:0}
.state-card{padding:18px 20px;background:#132230;border:1px solid #2b3d4f;display:grid;gap:8px}
.state-card .eyebrow{margin-bottom:0}
.state-line{margin:0}
.state-badge{display:inline-block;font-family:var(--serif);font-size:36px;line-height:1;letter-spacing:-.02em;color:#fff;padding-bottom:4px;border-bottom:3px solid #7fc8a9}
.state-badge[data-state=marginal]{border-bottom-color:#e0a072}
.state-badge[data-state=unstarted]{border-bottom-color:#ff9a8a}
.state-reason{font-size:14px;line-height:1.65;color:#d5dee6;margin:0}
.flags{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.flags li{font-size:12.5px;line-height:1.55;color:#c4d0da;padding-left:14px;position:relative}
.flags li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;background:#e0a072}
.control{display:grid;gap:8px;padding:14px 16px;background:#132230;border:1px solid #2b3d4f}
.control label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bdcbd8;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.control output{font-family:var(--serif);font-size:22px;letter-spacing:0;text-transform:none;color:#fff;font-weight:400}
.control-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.control-row>label:first-child{flex:1 1 200px}
.auto-toggle{display:inline-flex!important;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1px solid #4a5d70;font-size:12px!important;letter-spacing:.04em!important;text-transform:none!important;color:#eef2f5!important;cursor:pointer;background:#0b1520}
.auto-toggle input{width:20px;height:20px;accent-color:#e0a072;margin:0}
.control input[type=range]{width:100%;height:44px;margin:0;background:transparent;accent-color:#e0a072;cursor:pointer}
.control input[type=range]:disabled{opacity:.5;cursor:default}
.control-help{font-size:12px;line-height:1.6;color:#c4d0da;margin:0}
.control-help.warn{color:#f0c9a4}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{min-height:44px;padding:9px 14px;border:1px solid #4a5d70;color:#eef2f5;font-size:13px;line-height:1.35;text-align:left;background:#132230}
.presets button:hover{border-color:#e0a072;color:#fff}
.share{display:grid;gap:8px}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.share-input{flex:1 1 200px;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #4a5d70;background:#0b1520;color:#eef2f5;font:inherit;font-size:12.5px}
.bb-button{min-height:44px;padding:10px 16px;border:1px solid #4a5d70;background:#132230;color:#eef2f5;font-size:13.5px;font-weight:650}
.bb-button:hover{border-color:#e0a072}
.bb-button.primary{background:#e0a072;color:#101c29;border-color:#e0a072}
.bb-button:disabled{opacity:.45}
.bb-text-button{min-height:44px;padding:8px 4px;background:none;border:0;border-bottom:1px solid #6f8496;color:#eef2f5;font-size:13.5px;font-weight:650}
.bb-text-button:hover{color:#e0a072;border-color:#e0a072}

.model-details{margin-top:24px;border:1px solid #2b3d4f;background:#132230;padding:0 18px}
.model-details summary{cursor:pointer;min-height:54px;display:flex;align-items:center;font-size:14.5px;font-weight:650;color:#fff;list-style:none}
.model-details summary::-webkit-details-marker{display:none}
.model-details summary::before{content:'+';margin-right:12px;font-size:22px;font-weight:300;color:#e0a072}
.model-details[open] summary::before{content:'−'}
.state-details{margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 24px}
.state-details>div{display:grid;gap:2px;padding:8px 0;border-top:1px solid #2b3d4f;font-size:13px;line-height:1.5}
.state-details dt{color:#bdcbd8}
.state-details dd{margin:0;color:#fff;font-weight:650}
.model-details .control-help{padding-bottom:14px}

.represents{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.represents>div{padding:18px 20px;background:#132230;border:1px solid #2b3d4f}
.represents ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.65;color:#d5dee6}
.represents li+li{margin-top:8px}

/* narration */
.narration{margin-top:28px;padding:22px 24px;background:#132230;border:1px solid #e0a072;display:grid;gap:10px;max-width:920px}
.narration .eyebrow{margin-bottom:0}
.narration h3{font-size:clamp(24px,2.4vw,32px);color:#fff;margin:0}
.narration h3:focus-visible{outline:3px solid #8fc4ea;outline-offset:4px}
.narration p{font-size:15.5px;line-height:1.7;color:#eef2f5;margin:0;max-width:820px}
.narration-actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:4px}

/* ---------- light dossier tweaks ---------- */
.chapter{background:#fff}
.bb-page .section .two-col>div:first-child h2{margin-bottom:0}

/* ---------- responsive ---------- */
@media(max-width:1100px){.bb-hero{gap:36px;padding:44px 5% 48px}.bb-lab{padding-inline:5%}.bb-lab-grid{grid-template-columns:1fr;gap:20px}}
@media(max-width:800px){.inlet-figure svg{min-width:760px}.bb-hero{grid-template-columns:1fr;padding:36px 6% 40px;gap:28px}.bb-lab{padding:44px 6% 48px}.represents{grid-template-columns:1fr}.state-badge{font-size:30px}.bb-entry{grid-template-columns:36px 1fr;padding:16px}.state-details{grid-template-columns:1fr}}
@media(max-width:480px){.presets button,.share-row .bb-button{flex:1 1 100%}.narration-actions .bb-button{flex:1 1 40%}}
@media(prefers-reduced-motion:reduce){.bb-entry,.bb-entry:hover{transition:none;transform:none}.bb-part{transition:none}}