/* TSE Protocol v2.0 — shell styling is injected via the page content <style> for live tuning. */
.tse-page img{max-width:100%;height:auto}

/* ===== Hero: DNA centered ON the vial, contained in the hero (2026-07) =====
   The DNA <img> now lives INSIDE .dp-vial-col (see template-protocol.php), so it
   shares the vial's horizontal center. We center it on that box and lift it a
   touch so the helix threads through the vial body rather than sitting high. */
.dp-hero .dp-vial-col{overflow:visible}
.dp-hero .dp-vial-col .dp-hero-svg{
  display:block!important;position:absolute!important;
  left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
  width:min(540px,80vw)!important;max-width:none!important;height:auto!important;
  transform:translate(-50%,-50%)!important;
  opacity:.55!important;pointer-events:none!important;z-index:0!important;
}
.dp-hero .dp-vial-col .dp-glow,.dp-hero .dp-vial-col .dp-ground{z-index:1}
.dp-hero .dp-vial-col .dp-vial{position:relative!important;z-index:2!important}
/* Vertically center the whole vial+DNA composition in the hero band (desktop side-by-side).
   Shrink the col to the vial so bottom-align == centered, center it in the grid row, then
   nudge +11px to correct the hero's asymmetric top/bottom padding (34px vs 56px). */
@media(min-width:901px){
  .dp-hero .dp-vial-col{align-self:center!important;min-height:0!important;transform:translateY(11px)!important}
}

/* ===== Mobile optimizations (2026-07) ===== */
@media(max-width:980px){
  html,body{overflow-x:hidden!important}
  .tse-main,.tse-layout,.tse-content,.tse-protocol-body{min-width:0!important;max-width:100%!important}
  .tse-protocol-body section,.tse-related,.tse-related-grid{min-width:0!important;max-width:100%!important}
}
@media(max-width:900px){
  .dp-hero .dp-vial-col{min-height:200px!important}
  .dp-hero .dp-vial{width:min(200px,56vw)!important}
  .dp-hero .dp-vial-col .dp-hero-svg{width:min(340px,74vw)!important;opacity:.3!important;transform:translate(-50%,-50%)!important}
  /* The per-page inline <style> wrongly forces .dp-mobile-menu{display:block!important},
     leaving the mobile menu stuck open. Override it (higher specificity) so it starts
     closed and the burger's .is-open toggle (home.js) works. */
  header .dp-mobile-menu{display:none!important}
  header .dp-mobile-menu.is-open{display:block!important}
}
@media(max-width:980px){.tse-prepcard{margin-bottom:30px!important}}
@media(max-width:560px){.tse-protocol-body div[style*="grid-template-columns: repeat(2"]{grid-template-columns:1fr!important}.tse-protocol-body .tse-supgrid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.tse-related-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.tse-related-card{padding:16px!important}}

/* References accordion */
.tse-acc-head{cursor:pointer;display:flex;align-items:center;gap:12px;user-select:none}
.tse-acc-head::after{content:'';margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid #9aa2ab;border-bottom:2px solid #9aa2ab;transform:rotate(45deg);transition:transform .2s}
.tse-acc:not(.collapsed) .tse-acc-head::after{transform:rotate(-135deg)}
.tse-acc.collapsed .tse-acc-body{display:none!important}