/* YAP/TAZ interactive research page: page-wide visual system */
html:has(#yap-circuit-lab), body:has(#yap-circuit-lab) {
  min-height: 100%;
  background: #061126 !important;
}
body:has(#yap-circuit-lab) {
  color: #e8f1ff !important;
  background:
    radial-gradient(ellipse at 82% 9%, rgba(38,82,150,.34), transparent 34rem),
    radial-gradient(ellipse at 5% 54%, rgba(13,91,128,.18), transparent 30rem),
    linear-gradient(145deg,#0a1934 0%,#061126 46%,#050d1d 100%) fixed !important;
  background-color: #061126 !important;
}
body:has(#yap-circuit-lab)::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -18vmax;
  pointer-events: none;
  opacity: .48;
  background:
    repeating-radial-gradient(ellipse at 73% 34%, transparent 0 54px, rgba(108,153,220,.105) 55px 57px, transparent 58px 105px),
    radial-gradient(ellipse at 72% 33%, rgba(33,79,143,.15), transparent 42%);
  animation: yap-background-drift 90s linear infinite;
  transform-origin: center;
}
body:has(#yap-circuit-lab) > header,
body:has(#yap-circuit-lab) header,
body:has(#yap-circuit-lab) #navbar,
body:has(#yap-circuit-lab) progress#progress {
  display: none !important;
}
body:has(#yap-circuit-lab) > main,
body:has(#yap-circuit-lab) main,
body:has(#yap-circuit-lab) main > .container,
body:has(#yap-circuit-lab) .post,
body:has(#yap-circuit-lab) .page {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #e8f1ff !important;
}
body:has(#yap-circuit-lab) footer,
body:has(#yap-circuit-lab) .fixed-bottom {
  display: none !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab {
  width: min(100% - 2rem, 1280px);
  max-width: 1280px;
  margin: 0 auto;
  /* Reserve the former back-link row's space after moving that link into the
     otherwise-empty top band. */
  padding: 5.75rem 0 3rem;
}

/* Put the homepage link inside the empty top band instead of below it. */
body:has(#yap-circuit-lab) .yap-home-row {
  position: fixed !important;
  top: 0.7rem !important;
  left: max(1rem, calc((100vw - 1280px) / 2)) !important;
  z-index: 2147483647 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:has(#yap-circuit-lab) .yap-home-button {
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
}
body:has(#yap-circuit-lab) #yap-circuit-lab .circuit-hero {
  background:
    repeating-radial-gradient(ellipse at 86% 37%, transparent 0 36px, rgba(147,197,253,.09) 37px 39px, transparent 40px 70px),
    radial-gradient(circle at 80% 15%,rgba(59,130,246,.24),transparent 30%),
    radial-gradient(circle at 12% 90%,rgba(34,211,238,.09),transparent 30%),
    linear-gradient(145deg,rgba(12,29,61,.88),rgba(6,17,38,.86) 72%);
  border-color: rgba(147,197,253,.14);
}
body:has(#yap-circuit-lab) #yap-circuit-lab .circuit-section {
  background: linear-gradient(145deg,rgba(13,29,58,.78),rgba(7,17,36,.82));
  backdrop-filter: blur(8px);
}
.yap-home-row { display:flex; justify-content:flex-start; margin:0 0 .8rem; }
.yap-home-button {
  display:inline-flex; align-items:center; gap:.6rem; min-height:42px;
  padding:.65rem .95rem; border:1px solid rgba(147,197,253,.3); border-radius:999px;
  color:#dbeafe !important; background:rgba(12,29,61,.7); text-decoration:none !important;
  font-size:.82rem; font-weight:800; box-shadow:0 8px 22px rgba(0,0,0,.13);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.yap-home-button:hover { transform:translateY(-2px); border-color:#93c5fd; background:rgba(37,99,235,.26); }
.yap-home-button .home-arrow { font-size:1.05rem; color:#93c5fd; }
.thought-card { position:relative; overflow:hidden; }
.thought-intro { max-width:790px; color:#a9bddc; line-height:1.7; font-size:.94rem; }
.thought-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr); gap:1rem; align-items:stretch; }
.cell-stage { position:relative; min-width:0; border:1px solid rgba(147,197,253,.18); border-radius:16px; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,rgba(22,62,112,.35),rgba(3,12,28,.72)); }
.cell-stage svg { display:block; width:100%; height:auto; min-height:240px; }
.cell-caption { display:flex; flex-wrap:wrap; gap:.45rem; padding:.7rem .8rem; border-top:1px solid rgba(147,197,253,.13); color:#8ea7cb; font-size:.7rem; }
.cell-caption span { display:inline-flex; align-items:center; gap:.35rem; }
.legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#67e8f9; }
.legend-dot.force { background:#fbbf24; }
.legend-dot.nucleus { background:#a5b4fc; }
.thought-side { display:flex; flex-direction:column; gap:.7rem; }
.thought-step { padding:1rem; border:1px solid rgba(147,197,253,.18); border-radius:13px; background:rgba(3,12,28,.45); }
.thought-step .thought-count { color:#67e8f9; font-size:.66rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.thought-step h3 { margin:.4rem 0 .35rem; color:#e5efff; font-size:1.08rem; }
.thought-step p { margin:0; color:#a9bddc; font-size:.82rem; line-height:1.65; }
.thought-status { display:flex; align-items:center; gap:.55rem; margin-top:.65rem; color:#bfdbfe; font-size:.72rem; }
.thought-status::before { content:""; width:8px; height:8px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.12); }
.thought-controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.thought-controls .circuit-btn { flex:1 1 auto; }
.thought-progress { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.35rem; margin-top:.85rem; }
.thought-progress button { min-height:34px; padding:.3rem; border:1px solid rgba(147,197,253,.17); border-radius:8px; color:#8ea7cb; background:rgba(15,35,70,.5); font-size:.67rem; cursor:pointer; }
.thought-progress button[aria-current="step"] { color:#f0f7ff; border-color:#60a5fa; background:rgba(37,99,235,.25); }
.cell-membrane { fill:rgba(59,130,246,.055); stroke:rgba(147,197,253,.65); stroke-width:2.2; }
.cell-actin { fill:none; stroke:rgba(103,232,249,.48); stroke-width:2; stroke-linecap:round; }
.cell-nucleus { fill:rgba(129,140,248,.13); stroke:#a5b4fc; stroke-width:2; }
.cell-nucleolus { fill:rgba(196,181,253,.3); stroke:rgba(196,181,253,.8); }
.cell-dna { fill:none; stroke:rgba(196,181,253,.7); stroke-width:1.6; stroke-linecap:round; }
.cell-label { fill:#b9cce8; font:11px system-ui,sans-serif; }
.force-arrow { stroke:#fbbf24; stroke-width:2.5; stroke-linecap:round; opacity:.12; }
.force-dot { fill:#fbbf24; opacity:.15; }
.yap-dot { fill:#67e8f9; stroke:#cffafe; stroke-width:.8; opacity:.25; }
.yap-path { fill:none; stroke:#67e8f9; stroke-width:1.6; stroke-dasharray:4 7; opacity:.15; }
.cell-stage[data-phase="input"] .force-arrow,.cell-stage[data-phase="input"] .force-dot { opacity:1; }
.cell-stage[data-phase="input"] .yap-dot { opacity:.95; animation:yap-float 1.5s ease-in-out infinite alternate; }
.cell-stage[data-phase="input"] .yap-path { opacity:.95; animation:yap-flow 1.2s linear infinite; }
.cell-stage[data-phase="control"] .force-arrow { opacity:.5; }
.cell-stage[data-phase="control"] .yap-dot { opacity:.65; }
.cell-stage[data-phase="control"] .yap-path { opacity:.55; }
.cell-stage[data-phase="withdrawal"] .force-arrow,.cell-stage[data-phase="withdrawal"] .force-dot { opacity:.05; }
.cell-stage[data-phase="withdrawal"] .yap-dot { opacity:.75; animation:yap-fade 2s ease-out forwards; }
.cell-stage[data-phase="withdrawal"] .yap-path { opacity:.45; }
.cell-stage[data-phase="recovery"] .force-arrow,.cell-stage[data-phase="recovery"] .force-dot { opacity:.05; }
.cell-stage[data-phase="recovery"] .yap-dot { opacity:.2; }
.cell-stage[data-phase="recovery"] .yap-path { opacity:.08; }
.cell-stage[data-phase="challenge"] .force-arrow,.cell-stage[data-phase="challenge"] .force-dot { opacity:.95; }
.cell-stage[data-phase="challenge"] .yap-dot { opacity:1; animation:yap-float 1s ease-in-out infinite alternate; }
.cell-stage[data-phase="challenge"] .yap-path { opacity:1; animation:yap-flow .85s linear infinite; }
@keyframes yap-background-drift { to { transform:rotate(360deg); } }
@keyframes yap-flow { to { stroke-dashoffset:-22; } }
@keyframes yap-float { from { transform:translateY(0); } to { transform:translateY(-5px); } }
@keyframes yap-fade { 0% { opacity:.9; } 100% { opacity:.16; } }
@media(max-width:760px) { .thought-layout { grid-template-columns:1fr; } .cell-stage svg { min-height:190px; } }
@media(max-width:560px) {
  body:has(#yap-circuit-lab) #yap-circuit-lab { width:calc(100% - 1rem); padding-top:.55rem; }
  .yap-home-button { min-height:40px; }
  .thought-controls { display:grid; grid-template-columns:1fr 1fr; }
  .thought-controls .circuit-btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  body:has(#yap-circuit-lab)::before,.cell-stage *, .cell-stage *::before,.cell-stage *::after { animation:none !important; transition:none !important; }
}


/* Remove the theme-generated page heading and its reserved top band only on this page. */
body:has(#yap-circuit-lab) .post-header,
body:has(#yap-circuit-lab) .page-header,
body:has(#yap-circuit-lab) .post-title,
body:has(#yap-circuit-lab) .page-title,
body:has(#yap-circuit-lab) .page-heading {
  display: none !important;
}
body:has(#yap-circuit-lab) main,
body:has(#yap-circuit-lab) main > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab {
  padding-top: .35rem;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .yap-home-row {
  margin-top: 0;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .cell-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .cell-stage svg {
  width: min(100%, 560px);
  max-width: 560px;
  min-height: 0;
  margin: auto;
  flex: 0 1 auto;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .cell-caption {
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* On narrow screens, keep the live signal graph pinned above the sliders while the user adjusts them. */
@media(max-width:720px) {
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-grid {
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-readout {
    display: contents;
  }
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-chart {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 8;
    width: 100%;
    max-height: 164px;
    padding: .35rem .4rem;
    margin: 0;
    border: 1px solid rgba(147,197,253,.24);
    border-radius: 12px;
    background: rgba(6,17,38,.97);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
  }
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-controls {
    order: 1;
    width: 100%;
  }
  body:has(#yap-circuit-lab) #yap-circuit-lab #lab-state,
  body:has(#yap-circuit-lab) #yap-circuit-lab #lab-result-title,
  body:has(#yap-circuit-lab) #yap-circuit-lab #lab-result-copy,
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-meter-label,
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-meter,
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-caveat {
    order: 2;
  }
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-chart text {
    font-size: 10px;
  }
}
@media(max-width:420px) {
  body:has(#yap-circuit-lab) #yap-circuit-lab .lab-chart {
    max-height: 145px;
  }
}

/* Center the complete cell drawing in the available figure area, not merely its SVG box. */
body:has(#yap-circuit-lab) #yap-circuit-lab .thought-layout > .cell-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .thought-layout > .cell-stage > svg {
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(100%, 560px) !important;
  height: auto !important;
  max-width: 560px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  flex: none !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .thought-layout > .cell-stage > .cell-caption {
  grid-row: 2 !important;
  align-self: end !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Additional theme title-banner variants, scoped to this research page. */
body:has(#yap-circuit-lab) .post-header,
body:has(#yap-circuit-lab) .post-header *,
body:has(#yap-circuit-lab) .page-header,
body:has(#yap-circuit-lab) .page-header *,
body:has(#yap-circuit-lab) .header-section {
  display: none !important;
}

/* The research page uses its own wrapper layout, so no theme title banner or
   header shadow should occupy space above the custom research interface. */
html:has(#yap-circuit-lab),
body:has(#yap-circuit-lab) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
body:has(#yap-circuit-lab) > header,
body:has(#yap-circuit-lab) > header::before,
body:has(#yap-circuit-lab) > header::after,
body:has(#yap-circuit-lab) header,
body:has(#yap-circuit-lab) #navbar,
body:has(#yap-circuit-lab) .post-header,
body:has(#yap-circuit-lab) .page-header,
body:has(#yap-circuit-lab) .header-section,
body:has(#yap-circuit-lab) .post-title,
body:has(#yap-circuit-lab) .page-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:has(#yap-circuit-lab) > main,
body:has(#yap-circuit-lab) main,
body:has(#yap-circuit-lab) main > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}


/* FINAL PAGE-LOCAL OVERRIDE
   This stylesheet is only loaded by the YAP/TAZ research page. Do not depend
   on :has() or on the theme's Liquid layout matching to remove the top band. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  scroll-padding-top: 0 !important;
}
body > header,
body > nav,
body > .navbar,
body header,
body #navbar,
body #progress,
body progress,
body .progress,
body .progress-bar,
body .post-header,
body .page-header,
body .header-section,
body .page-heading,
body .post-title,
body .page-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body > main,
body > .container,
body > .page,
body > .post,
body main,
body main > .container,
body main > .page,
body main > .post {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
body:before,
body:after,
html:before,
html:after {
  box-shadow: none !important;
}

/* Structural top-of-page fix:
   - remove theme-generated navbar spacer rows on this page;
   - put the home link in normal flow so it aligns with the hero card;
   - let the research page start at the top without a reserved navbar band. */
html:has(#yap-circuit-lab),
body:has(#yap-circuit-lab) {
  margin: 0 !important;
  padding: 0 !important;
}
body:has(#yap-circuit-lab) > main,
body:has(#yap-circuit-lab) main,
body:has(#yap-circuit-lab) main > .container,
body:has(#yap-circuit-lab) .post,
body:has(#yap-circuit-lab) .page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab {
  width: min(100% - 2rem, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 auto 3rem !important;
  padding-top: 0 !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .yap-home-row {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto .8rem !important;
  padding: 0 !important;
  z-index: 2 !important;
}
body:has(#yap-circuit-lab) #yap-circuit-lab .yap-home-button {
  position: relative !important;
  margin: 0 !important;
}
@media (max-width: 560px) {
  body:has(#yap-circuit-lab) #yap-circuit-lab {
    width: calc(100% - 1rem) !important;
    padding-top: 0 !important;
  }
}

/* Plain-language explainer: distinguish established biology from the review's
   proposed signal-resolution framework. */
.plain-language-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.plain-language-card {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid rgba(147,197,253,.17);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13,29,58,.72), rgba(7,17,36,.78));
}
.plain-language-number {
  display: block;
  margin-bottom: .6rem;
  color: #67e8f9;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.plain-language-card h3 {
  margin: 0 0 .65rem;
  color: #eaf2ff;
  font-size: 1.08rem;
  line-height: 1.35;
}
.plain-language-card p,
.plain-language-card li {
  color: #aebfda;
  font-size: .87rem;
  line-height: 1.7;
}
.plain-language-card p { margin: .55rem 0 0; }
.plain-language-card strong { color: #e6f1ff; }
.plain-language-card ol { padding-left: 1.25rem; margin: .65rem 0 0; }
.plain-language-card li { padding-left: .15rem; margin: .3rem 0; }
.plain-language-proposal {
  border-color: rgba(103,232,249,.28);
  background: linear-gradient(145deg, rgba(10,48,70,.68), rgba(7,20,42,.86));
}
.plain-language-caveat {
  margin-top: .8rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid #67e8f9;
  border-radius: 0 12px 12px 0;
  background: rgba(3,12,28,.48);
  color: #aebfda;
  font-size: .86rem;
  line-height: 1.7;
}
.plain-language-caveat strong { color: #eaf2ff; }
.plain-language-sources {
  margin: .8rem 0 0;
  color: #91a9cc;
  font-size: .78rem;
  line-height: 1.6;
}
.plain-language-sources a { color: #93c5fd; }
@media (max-width: 760px) {
  .plain-language-grid { grid-template-columns: 1fr; }
}