/* ============================================================
   UTSIP final deck — DISCIPLINED design system
   COLOURS (5 + background), nothing else:
     --bg    dark navy   (background)
     --nuc   blue        NUCLEAR DNA  / direct-alignment / assembled
     --mito  gold        MITOCHONDRIAL DNA / potential
     --ink   white       primary text + emphasis + "matches"
     --muted grey        secondary text (the ONLY grey)
     --alert red         mismatch / "can't find it"
     --green green       alignment MATCH
   TEXT STYLES (5 only): h1.title, h2.title, .lead, .sub, .small
   ============================================================ */
:root{
  --bg:#0a0f16; --nuc:#63b3ff; --mito:#ffd24a; --ink:#f2f6fb; --muted:#9fb3c8; --alert:#e8564a; --green:#7fe0a0;
  --panel:#16273a; --font:'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
.reveal{ font-family:var(--font); font-size:44px; color:var(--ink); }
.reveal .slides{ text-align:left; }
.reveal section.center{ text-align:center; }

/* ---- the 5 text styles ---- */
.reveal h1.title{ font-size:1.55em; text-transform:uppercase; font-weight:800; letter-spacing:.5px; color:#fff; line-height:1.08; margin:0 0 .3em; }
.reveal h2.title{ font-size:1.12em; font-weight:800; color:#fff; line-height:1.1; margin:0 0 .3em; }
.lead { font-size:.8em;  line-height:1.42; color:var(--ink);   margin:.28em 0; }   /* readable body + captions */
.sub  { font-size:.62em; line-height:1.4;  color:var(--muted); margin:.24em 0; }   /* secondary note */
.small{ font-size:.5em;  line-height:1.35; color:var(--muted); margin:.5em 0 0; }  /* credit / tiny labels */
.reveal strong{ color:#fff; }
/* objective-slide header: small tag + descriptive title + a one-line "what I built" */
.objtag{ font-size:.42em; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--mito); margin:0 0 .1em; }
.madeit{ font-size:.56em; line-height:1.35; color:var(--muted); margin:.1em 0 .35em; text-align:center; }
.madeit b{ color:var(--ink); }

/* ---- the only colour accents (semantic) ---- */
.nuc{ color:var(--nuc); font-weight:700; }
.mito{ color:var(--mito); font-weight:700; }
.hot{ color:var(--mito); }
.grn{ color:var(--green); font-weight:700; }
.dead{ color:var(--alert); font-weight:800; }

/* ===== video + legend stage (height-capped so nothing overflows) ===== */
.stage{ display:flex; gap:34px; align-items:center; justify-content:center; margin:.14em 0 .08em; }
.stage video{ height:430px; width:auto; aspect-ratio:16/9; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.55); background:#000; }
.legend{ text-align:left; min-width:290px; max-width:360px; }
.legend .lrow{ display:flex; align-items:flex-start; gap:.45em; margin:.5em 0; font-size:.56em; line-height:1.28; color:var(--ink); }
.legend .sw{ width:1em; height:1em; border-radius:5px; flex:none; margin-top:.1em; }
.legend .sw.snuc{ background:var(--nuc); }
.legend .sw.smito{ background:var(--mito); }
.legend .sw.snumt{ background:linear-gradient(135deg,var(--mito) 0 50%, var(--nuc) 50% 100%); }
.legend b{ color:#fff; }

/* ===== DNA sequence cells (shared by mutation + alignment slides) ===== */
.seqrow{ display:flex; align-items:center; justify-content:center; gap:.5em; margin:.16em 0; }
.seqlab{ width:260px; text-align:right; font-size:.5em; font-weight:700; line-height:1.1; }
.seqlab.nuc{ color:var(--nuc); } .seqlab.mito{ color:var(--mito); }
.seq{ display:flex; gap:4px; }
.seq .b{ width:34px; height:46px; display:flex; align-items:center; justify-content:center;
  font-family:'Consolas','Courier New',monospace; font-size:26px; font-weight:700; border-radius:6px; background:#0f1b28; color:var(--ink); }
#seq-mito .b{ color:var(--mito); }
#seq-nuc  .b{ color:var(--nuc); }
.seq .b.flash{ animation:mutflash .46s ease; }
@keyframes mutflash{ 0%{ background:var(--alert); color:#fff; transform:translateY(-7px);} 100%{ background:#0f1b28; transform:none; } }
.seq .b.match{ box-shadow:inset 0 -6px 0 var(--green); }   /* green underline = matches */
.seq .b.diff { box-shadow:inset 0 -6px 0 var(--alert); }  /* red underline   = mismatch */

/* mutation slide: reserve caption space so the slide stays centred when caption 3 appears */
#mut-caption, #mut-conclude{ min-height:2.6em; }
/* mutation slide meter */
#mut-stage{ margin:.25em auto; }
.copyarrow{ font-size:.44em; color:var(--muted); text-align:center; margin:.05em 0; }
#mut-meter{ text-align:center; margin:.28em 0 .08em; font-size:.58em; color:var(--muted); }
#mut-meter b{ color:#fff; }

/* ===== detection slide: THREE alignment blocks that stack (accumulate) ===== */
#align .seq .b{ width:30px; height:34px; font-size:19px; border-radius:5px; }   /* compact: 6 rows must fit */
#align .seqlab{ width:230px; font-size:.42em; }
#align .seq .b{ color:var(--nuc); }          /* nuclear rows = blue by default */
#align .seq.mref .b{ color:var(--mito); }    /* mitochondrial reference rows = gold */
.alnblock{ margin:.14em auto; }
.alnblock.reserved{ visibility:hidden; }                          /* reserve space so slide never re-centers */
.alnhead{ font-size:.46em; color:var(--muted); margin:.02em 0 .04em; }
.alnwhy{ font-size:.4em; color:var(--ink); margin:0 0 .12em; font-style:italic; }
.alnhead .verdict{ font-weight:800; margin-left:.35em; }
.verdict.ok{ color:var(--green); } .verdict.no{ color:var(--alert); }

/* ===== O1 origin spin-wheel ===== */
#wheel-wrap{ display:flex; gap:2em; align-items:center; justify-content:center; margin:.1em 0; }
#wheel-svg{ width:300px; height:300px; flex:none; }
#wheel{ transform-box:view-box; transform-origin:180px 180px; transition:transform 2.4s cubic-bezier(.15,.7,.15,1); }
.slice{ stroke:#0a0f16; stroke-width:1.5; }
.slice.land{ stroke:var(--green); stroke-width:5; }
.wlabel{ font-size:11px; font-weight:800; fill:#0a0f16; pointer-events:none; }
.wpointer{ fill:var(--ink); }
.wheelside{ text-align:left; min-width:320px; }
#wheel-read{ font-size:.5em; color:var(--muted); margin-bottom:.3em; }
/* wheel-side vertical bar charts — TWO separate charts: your spins (top) + what we found (bottom) */
.vchart{ margin:.15em 0; }
.vtitle{ font-size:.4em; color:var(--muted); font-weight:700; margin-bottom:.1em; }
.vbars{ display:flex; align-items:flex-end; gap:6px; height:100px; }
.vcol{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.vbar{ width:22px; background:var(--mito); border-radius:4px 4px 0 0; transition:height .3s; }
.vlab{ font-size:.28em; color:var(--muted); margin-top:.15em; }
.spin-btn{ margin-top:.4em; font-size:.5em; font-weight:800; color:#0a0f16; background:var(--mito);
  border:none; border-radius:8px; padding:.35em .9em; cursor:pointer; font-family:var(--font); }

/* ===== O1 mechanism: bigger gene = bigger target = more NUMTs ===== */
.mechwrap{ display:flex; gap:3.5em; justify-content:center; align-items:flex-start; margin:.5em 0; }
.mechcol{ text-align:center; max-width:420px; }
.genebar{ height:42px; background:var(--mito); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#0a0f16; font-weight:800; font-size:.42em; margin:0 auto; }
.genebar.big{ width:340px; } .genebar.small{ width:120px; }
.mechcol .arrows{ font-size:.7em; color:var(--nuc); margin:.25em 0; letter-spacing:.35em; }
.mechcol .ncount{ font-size:.46em; color:var(--muted); line-height:1.3; }
.mechcol .ncount strong{ color:var(--ink); }

/* ===== O1b non-bias: stacked spectrum (F2 style) — each group split into the two methods ===== */
.sbwrap{ display:flex; gap:1.5em; justify-content:center; align-items:flex-end; height:250px; margin:.3em 0 .1em; }
.sbgroup{ display:flex; flex-direction:column; align-items:center; }
.sbbar{ display:flex; flex-direction:column; width:46px; }
.sbseg{ width:100%; }
.sbseg.pot{ background:var(--mito); border-radius:6px 6px 0 0; }
.sbseg.assem{ background:var(--nuc); }
.sblab{ font-size:.36em; color:var(--ink); font-weight:700; margin-top:.35em; text-align:center; line-height:1.1; }
.sblegend{ font-size:.44em; color:var(--muted); }
.sblegend .sw{ display:inline-block; width:.8em; height:.8em; border-radius:3px; vertical-align:middle; margin:0 .2em 0 .8em; }
.sblegend .sw.dir{ background:var(--nuc); } .sblegend .sw.pot{ background:var(--mito); }

/* ===== O2 function distribution bars ===== */
.fbars{ max-width:900px; margin:.08em auto; }
.fbar{ display:flex; align-items:center; gap:.5em; margin:.07em 0; font-size:.5em; }
.fbar .flab{ width:230px; text-align:right; color:var(--ink); font-weight:700; }
.fbar .ftrack{ flex:1; white-space:nowrap; }
.fbar .ffill{ height:18px; display:inline-block; vertical-align:middle; }
.fbar .ffill.dir  { background:var(--nuc);  border-radius:5px 0 0 5px; }   /* direct = mito vs nucleus (assembled) */
.fbar .ffill.cross{ background:var(--mito); border-radius:0 5px 5px 0; }   /* cross-species (potential) */
.fbar .ffill.solo { border-radius:5px; }                                  /* single-method row (Coding) */
.fbar .fcount{ color:var(--muted); width:30px; }
.fbar .ptovtag{ color:var(--mito); font-weight:800; white-space:nowrap; margin-left:.45em; vertical-align:middle; }
.fbar.coding .flab{ color:var(--mito); }
.flegend{ font-size:.42em; color:var(--muted); text-align:center; margin:.15em 0 0; }
.flegend .sw{ display:inline-block; width:.8em; height:.8em; border-radius:3px; vertical-align:middle; margin:0 .2em 0 .9em; }
.flegend .sw.dir{ background:var(--nuc); } .flegend .sw.cross{ background:var(--mito); }
.flag2{ display:flex; gap:1.2em; justify-content:center; margin-top:.2em; }
.flagcard{ background:var(--panel); border-radius:12px; padding:.4em .7em; max-width:44%; text-align:left; }
.flagcard .fh{ font-size:.56em; font-weight:800; }
.flagcard .fb{ font-size:.44em; color:var(--muted); line-height:1.3; margin-top:.2em; }
.flagcard.ptov .fh{ color:var(--mito); } .flagcard.slain .fh{ color:var(--nuc); }

/* ===== O2 answer 1/2: "genome is mostly junk" landing bar ===== */
.gwrap{ max-width:1000px; margin:.34em auto .12em; }
.gexp, .gours{ position:relative; height:1.1em; }
.gmark{ position:absolute; transform:translateX(-50%); font-size:.5em; font-weight:800; }
.gmark.exp{ color:var(--muted); bottom:0; }
.gmark.our{ color:var(--mito); top:0; }
.growlab{ font-size:.34em; color:var(--muted); text-align:center; margin:.04em 0; }
.growlab.our{ color:var(--mito); font-weight:700; }
.genome{ display:flex; height:42px; border-radius:9px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.45); }
.gseg{ display:flex; align-items:center; justify-content:center; font-size:.32em; font-weight:800; letter-spacing:.4px; }
.gseg.junk{ background:var(--muted); color:#0a0f16; flex:0 0 82%; }
.gseg.work{ background:var(--mito); color:#0a0f16; flex:0 0 18%; }

/* ===== O2 answer 2/2: the "why" logic chain ===== */
.logic{ max-width:880px; margin:.3em auto .12em; }
.logic .row{ text-align:center; margin:.13em 0; }
.lstep{ display:inline-block; background:var(--panel); border-radius:10px; padding:.3em .8em; font-size:.5em; font-weight:800; color:var(--ink); }
.logic .larrow{ font-size:.5em; color:var(--muted); text-align:center; margin:.08em 0; line-height:1.3; }
.logic .larrow strong{ color:var(--ink); }
.logic + .caveat{ margin-top:.6em; }   /* O2-why: give the caveat room below the last logic step */

/* ===== O3 hero: reconstruction reuses the compact alignment cells (see #align) ===== */
#recon .seq .b{ width:30px; height:34px; font-size:19px; border-radius:5px; color:var(--nuc); }
#recon .seqlab{ width:230px; font-size:.42em; }
#recon .alnhead{ font-size:.46em; color:var(--muted); margin:.02em 0 .1em; }
#recon-cap{ min-height:2.5em; }
#recon-conclude{ min-height:1.7em; }
#recon-meter{ text-align:center; margin:.18em 0 .04em; font-size:.5em; color:var(--muted); }
#recon-meter b{ color:#fff; }
.plat{ color:var(--green); font-weight:800; margin-left:.2em; }

/* ===== reusable CAVEAT box (yellow, skippable disclaimer — not the main point) =====
   display:table => shrinks to its content (no empty space) yet margin:auto still centres it. */
.caveat{ display:table; max-width:900px; margin:.28em auto 0; font-size:.44em; line-height:1.28;
  background:rgba(255,210,74,.09); border:1px solid rgba(255,210,74,.34); border-radius:7px; padding:.3em .75em; }
.caveat .clab{ font-size:.82em; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mito); margin-right:.5em; }
.caveat .ctext{ color:var(--muted); }
.caveat .ctext strong{ color:var(--ink); }

/* ===== results table (future-work pilot vs Huang) ===== */
.rtable{ border-collapse:collapse; margin:.3em auto; }
.rtable th, .rtable td{ padding:.32em .8em; text-align:center; border-bottom:1px solid #2a3a4d; font-size:.46em; }
.rtable th{ color:var(--muted); font-weight:700; }
.rtable td:first-child, .rtable th:first-child{ text-align:left; color:var(--ink); font-weight:700; }
.rtable .grn{ color:var(--green); font-weight:800; }
.rtable .hl{ color:var(--mito); font-weight:800; }

/* ===== O3 intro: age × conservation scatter (F6-style; rendered by js/o3intro.js) ===== */
#agechart{ width:780px; height:290px; margin:.15em auto .05em; display:block; }
.scdot{ fill:var(--muted); opacity:.5; }
.scstar{ fill:var(--mito); stroke:#0a0f16; stroke-width:1; }
.scaxis{ stroke:#33465b; stroke-width:1.5; }
.scaxlab{ fill:var(--muted); font-size:13px; font-family:var(--font); }
.scaxlab.hot{ fill:var(--mito); font-weight:800; }
.scanno{ fill:var(--mito); font-size:14px; font-weight:800; font-family:var(--font); }

/* ===== future-work pilot: comparison takeaway cards (reuse flagcard shell) ===== */
.flagcard.ok{ border-left:5px solid var(--green); } .flagcard.ok .fh{ color:var(--green); }
.flagcard.key{ border-left:5px solid var(--mito); } .flagcard.key .fh{ color:var(--mito); }
.cmpbar{ max-width:760px; margin:.3em auto; }
.cmprow{ display:flex; align-items:center; gap:.5em; margin:.14em 0; font-size:.5em; }
.cmprow .cl{ width:250px; text-align:right; color:var(--ink); font-weight:700; }
.cmprow .ct{ flex:1; }
.cmprow .cf{ height:20px; border-radius:5px; display:inline-block; vertical-align:middle; }
.cmprow .cf.agree{ background:var(--green); } .cmprow .cf.newc{ background:var(--mito); }
.cmprow .cn{ color:var(--muted); width:44px; }

/* ===== three-questions roadmap ===== */
.reveal ol.three{ list-style:none; margin:.25em 0; padding:0; }   /* beat reveal's `.reveal ol` decimal markers (was causing "1. 1.") */
.three li{ font-size:.74em; line-height:1.3; margin:.42em 0; }
.three .n{ color:var(--mito); font-weight:800; margin-right:.35em; }