/* Conceptual mechanism explorer, illustrated methods and the interactive viewers.
 * Light theme on ice-blue / lavender stages; no numeric or simulated output. */
.mva-mechanism,.mva-atlas{color:var(--bl-text);background:var(--bl-bg)}
.mva-mechanism [hidden],.mva-atlas [hidden],.mva-viewer [hidden]{display:none!important}
.mva-mechanism-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.mva-mechanism-heading .bl-section-head{margin-bottom:0}
.mva-mechanism-badge{white-space:nowrap;margin-top:6px}
:is(.mva-mechanism-controls,.mva-atlas-controls){display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:22px}
:is(.mva-mechanism-controls,.mva-atlas-controls) label{display:grid;gap:6px;color:var(--bl-text-soft);font-size:.8rem;font-weight:600;flex:1;max-width:420px;min-width:0}
:is(.mva-mechanism-controls,.mva-atlas-controls) select{width:100%;color:var(--bl-text);background:#fff;border:1px solid var(--bl-line-strong);border-radius:10px;padding:10px 38px 10px 14px;font:inherit;font-size:.92rem;font-weight:500;line-height:1.4;min-height:46px}
:is(.mva-mechanism-controls,.mva-atlas-controls) .bl-btn{min-height:46px;padding:0 16px;font-size:.86rem}
:is(.mva-mechanism-controls,.mva-atlas-controls,.mva-viewer-toolbar) .mva-motion-preference{display:flex;align-items:center;gap:8px;flex:0 0 auto;max-width:none;min-height:46px;cursor:pointer;font-weight:500;color:var(--bl-text-soft);font-size:.84rem}
.mva-motion-preference input{width:18px;height:18px;accent-color:var(--bl-blue);cursor:pointer}
.mva-mechanism-status,.mva-atlas-status{color:var(--bl-muted);font-size:.84rem;line-height:1.6;margin:12px 0 20px;min-height:25px}
.mva-mechanism-layout,.mva-atlas-record{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:22px;align-items:start}
.mva-mechanism-canvas{overflow:hidden;background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);box-shadow:var(--bl-shadow)}
.mva-mechanism-canvas-head{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--bl-line);color:var(--bl-text-soft);font-size:.78rem;font-weight:600}
.mva-mechanism-canvas-head span:last-child{color:var(--bl-muted);font-weight:400}
.mva-mechanism-art{display:block;width:100%;height:auto;background:var(--bl-ice)}
.mva-mechanism-flow path{fill:none;stroke:var(--bl-muted);stroke-width:1.5;stroke-dasharray:4 6}
.mva-mechanism-halo{fill:#fff;stroke:var(--bl-line-strong);stroke-width:1.5;transition:stroke .25s,fill .25s}
.mva-mechanism-node-label{fill:var(--bl-text);font:600 17px Inter,system-ui,sans-serif;text-anchor:middle}
.mva-mechanism-node-note{fill:var(--bl-muted);font:12px Inter,system-ui,sans-serif;text-anchor:middle}
.mva-mechanism-small{fill:var(--bl-amber);font:600 12px Inter,system-ui,sans-serif;text-anchor:middle}
.mva-mechanism-rna{fill:none;stroke:var(--bl-blue);stroke-width:4;stroke-linecap:round}
.mva-mechanism-dashed{fill:none;stroke:var(--bl-muted);stroke-width:1.5;stroke-dasharray:4 5}
.mva-mechanism-ribosome{fill:var(--bl-teal-soft);stroke:var(--bl-teal);stroke-width:1.7}
.mva-mechanism-peptide{fill:none;stroke:var(--bl-amber);stroke-width:4;stroke-linecap:round}
.mva-mechanism-protein{fill:none;stroke:url(#mva-mechanism-strand);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.mva-mechanism-variant-ring{fill:none;stroke:var(--bl-amber);stroke-dasharray:3 4}
.mva-mechanism-context-box{fill:#fff;stroke:var(--bl-line-strong);stroke-dasharray:5 5}
.mva-mechanism-gate-label{fill:var(--bl-amber);font:700 11px Inter,system-ui,sans-serif;letter-spacing:1px}
.mva-mechanism-gate-title{fill:var(--bl-text);font:600 18px Inter,system-ui,sans-serif}
.mva-mechanism-gate-note{fill:var(--bl-muted);font:13px Inter,system-ui,sans-serif}
.mva-mechanism-node.is-target .mva-mechanism-halo{fill:var(--bl-teal-soft);stroke:var(--bl-teal);stroke-width:2.5}
.mva-mechanism-node.is-target .mva-mechanism-context-box{stroke:var(--bl-teal);stroke-width:2;fill:var(--bl-teal-soft)}
.mva-mechanism-legend{display:flex;flex-wrap:wrap;gap:10px 20px;padding:10px 20px;color:var(--bl-text-soft);font-size:.78rem}
.mva-mechanism-legend span{display:flex;align-items:center;gap:8px}
.mva-mechanism-key{width:9px;height:9px;border-radius:50%;display:inline-block}
.mva-mechanism-key--target{background:var(--bl-teal)}
.mva-mechanism-key--gap{background:var(--bl-amber)}
.mva-mechanism-boundary{margin:10px 20px 20px;border-top:1px solid var(--bl-line);padding-top:16px;color:var(--bl-text-soft);font-size:.84rem;line-height:1.7}
.mva-mechanism-boundary strong{display:block;color:var(--bl-text);font-weight:600}
.mva-mechanism-panel,.mva-atlas-evidence{background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);padding:24px;overflow-wrap:anywhere;box-shadow:var(--bl-shadow);min-width:0}
.mva-mechanism-panel{margin-bottom:16px}
.mva-mechanism-panel .bl-kicker,.mva-atlas-evidence .bl-kicker{margin-bottom:8px;font-size:.72rem}
.mva-mechanism-panel h3,.mva-atlas-evidence h3{font-size:1.3rem;line-height:1.25;margin:0 0 12px}
.mva-mechanism-panel h4,.mva-atlas-evidence h4{color:var(--bl-text);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:20px 0 8px}
.mva-mechanism-panel p,.mva-atlas-evidence p{font-size:.92rem;line-height:1.7;color:var(--bl-text-soft);margin:0}
.mva-mechanism-decision,.mva-atlas-badges span{display:inline-block;border:1px solid var(--bl-line-strong);border-radius:999px;padding:4px 10px;font-size:.74rem;font-weight:600;color:var(--bl-text-soft);background:#fff}
.mva-mechanism-decision,.mva-atlas-badges span:last-child{color:#8a5600;border-color:#f3dcae;background:var(--bl-amber-soft)}
.mva-mechanism-decision[data-decision="Deprioritized"]{color:#5236ad;border-color:#d3c8f3;background:var(--bl-violet-soft)}
.mva-mechanism-decision[data-decision="Unresolved"]{color:#a83d50;border-color:#f3c5cd;background:var(--bl-coral-soft)}
.mva-mechanism-evidence{margin-top:20px;border-top:1px solid var(--bl-line);padding-top:14px;font-size:.84rem}
.mva-mechanism-evidence summary{cursor:pointer;color:var(--bl-blue-deep);font-weight:600;line-height:1.7}
.mva-mechanism-evidence div{padding-top:16px}
.mva-mechanism-evidence strong{display:block;font-size:.88rem;line-height:1.5;color:var(--bl-text)}
.mva-mechanism-evidence small{display:block;color:var(--bl-muted);font-size:.74rem;margin:6px 0}
.mva-mechanism-evidence a,.mva-atlas-evidence-link{color:var(--bl-blue-deep);display:inline-block;margin-top:10px;font-weight:600;text-decoration:underline;text-underline-offset:3px;line-height:1.6;font-size:.88rem}
.mva-mechanism-panel .mva-mechanism-footnote,.mva-atlas-evidence .mva-atlas-scope{font-size:.78rem;margin-top:16px;color:var(--bl-muted)}
.mva-atlas-badges{display:flex;flex-wrap:wrap;gap:7px}
.mva-atlas-evidence .mva-atlas-evidence-link{margin-top:22px}
.mva-atlas-intro{color:var(--bl-text-soft)}
.mva-mechanism.is-animated .is-target .mva-mechanism-halo{animation:mva-mechanism-pulse 3s ease-in-out infinite}
.mva-mechanism.is-animated .is-target :is(.mva-mechanism-rna,.mva-mechanism-peptide,.mva-mechanism-protein){stroke-dasharray:12 5;animation:mva-mechanism-trace 3s linear infinite}
.mva-mechanism.is-animated .is-target .mva-mechanism-context-box{animation:mva-mechanism-trace 3s linear infinite}
@keyframes mva-mechanism-pulse{50%{fill:#c9f1f1;stroke-width:4}}
@keyframes mva-mechanism-trace{to{stroke-dashoffset:-51}}
.mva-pathway-map{border-top:1px solid var(--bl-line);background:#fff}
.mva-pathway-map>summary{cursor:pointer;color:var(--bl-blue-deep);font-weight:600;font-size:.86rem;padding:16px 20px;line-height:1.6}

/* Scenes: a light ice/lavender stage with a heading, the viewer and a caption. */
.mva-scene-frame{margin:0;background:#fff;overflow:hidden;min-width:0;border:1px solid var(--bl-line);border-radius:var(--bl-radius);box-shadow:var(--bl-shadow);scroll-margin-top:calc(var(--bl-header-h) + 72px)}
.mva-scene-heading{padding:22px 24px 16px;position:relative;z-index:1}
.mva-scene-kicker{display:block;color:var(--bl-blue-deep);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mva-scene-heading h3{color:var(--bl-text);font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:8px 0 0;max-width:620px}
.mva-scene-heading p{color:var(--bl-muted);font-size:.86rem;margin:6px 0 0}
.mva-scene-art{display:block;width:100%;height:auto;overflow:hidden}
.mva-scene-label{fill:var(--bl-text-soft);font:600 20px Inter,system-ui,sans-serif;text-anchor:middle;letter-spacing:.5px}
.mva-scene-flow{fill:none;stroke:var(--bl-teal);stroke-width:3;stroke-dasharray:5 10;stroke-linecap:round;opacity:.8}
.mva-scene-orbit{fill:none;stroke:var(--bl-amber);stroke-width:2;stroke-dasharray:3 10;opacity:.7}
.mva-scene-caption{color:var(--bl-text-soft);font-size:.88rem;line-height:1.65;padding:16px 24px 22px;margin:0;border-top:1px solid var(--bl-line)}
.mva-scene-caption span{display:block;color:var(--bl-muted);font-size:.76rem;margin-top:8px}
.mva-scene-caption strong{font-weight:600;color:var(--bl-text)}
:is(.mva-mechanism,.mva-atlas).is-animated .mva-scene-float{animation:mva-scene-drift 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
:is(.mva-mechanism,.mva-atlas).is-animated .mva-scene-delay{animation-delay:-3.5s}
:is(.mva-mechanism,.mva-atlas).is-animated :is(.mva-scene-flow,.mva-scene-orbit){animation:mva-scene-flow 4s linear infinite}
@keyframes mva-scene-drift{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-9px) rotate(.7deg)}}
@keyframes mva-scene-flow{to{stroke-dashoffset:-60}}

/* Galleries: one horizontal rail of static thumbnails per section. */
.mva-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,calc((100% - 42px) / 4));gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:4px 2px 14px;margin:24px 0 18px;scrollbar-color:var(--bl-line-strong) transparent}
.mva-gallery-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius-sm);padding:0 0 14px;color:var(--bl-text);cursor:pointer;min-width:0;overflow:hidden;font-family:inherit;scroll-snap-align:start;transition:border-color .2s,box-shadow .2s,transform .2s}
.mva-gallery-card:hover{border-color:var(--bl-blue);box-shadow:var(--bl-shadow);transform:translateY(-2px)}
.mva-gallery-card[aria-pressed="true"]{border-color:var(--bl-blue);box-shadow:inset 0 0 0 2px var(--bl-blue)}
.mva-gallery-card strong{font-size:.88rem;line-height:1.4;padding:0 14px;font-weight:600}
.mva-gallery-card>span:last-child{font-size:.74rem;line-height:1.5;color:var(--bl-muted);padding:6px 14px 0}
.mva-gallery-thumb{display:block;width:100%;aspect-ratio:1.5;overflow:hidden;background:radial-gradient(ellipse at 48% 40%,#dbe9fa,#eef3fb 76%);margin-bottom:12px}
.mva-gallery-thumb img{width:100%;height:100%;display:block;object-fit:contain}

/* Interactive viewer: rotatable illustrative geometry projected into SVG/WebGL. */
.mva-viewer{color:var(--bl-text);background:#fff;min-width:0}
.mva-viewer-surface{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 45% 38%,#dbe9fa 0,rgba(238,243,251,0) 64%),linear-gradient(160deg,#f3f1fc,#e9f0fa 72%);outline-offset:-3px}
.mva-viewer[data-enhanced="true"] .mva-viewer-surface{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mva-viewer-surface.is-dragging{cursor:grabbing}
.mva-viewer :is(button,.mva-viewer-surface):focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--bl-blue)}
.mva-interactive-art{display:block;width:100%;height:auto;aspect-ratio:800/650;overflow:hidden;pointer-events:none}
.mva-surface-canvas,.mva-render-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mva-surface-canvas{z-index:1}
.mva-render-overlay{z-index:2}
.mva-viewer-label{fill:var(--bl-text-soft);font:600 15px Inter,system-ui,sans-serif;letter-spacing:.6px}
.mva-viewer-tools{padding:14px 24px 22px}
.mva-viewer-hint{font-size:.8rem;line-height:1.6;color:var(--bl-muted);margin:0 0 12px}
.mva-viewer-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mva-viewer-tools button{min-height:42px;min-width:42px;border:1px solid var(--bl-line-strong);border-radius:10px;background:#fff;color:var(--bl-text);font:600 .8rem/1.4 Inter,system-ui,sans-serif;cursor:pointer;padding:8px 12px;transition:border-color .2s,background .2s}
.mva-viewer-tools button:hover{border-color:var(--bl-blue);background:var(--bl-blue-soft)}
.mva-viewer-tools button:disabled{opacity:.45;cursor:default}
.mva-viewer-toolbar output{font:600 .8rem ui-monospace,monospace;color:var(--bl-text-soft);min-width:42px;text-align:center}
.mva-viewer-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:18px}
.mva-viewer-steps button{font-size:.74rem;border-radius:0;padding:10px 5px;border:0;border-top:2px solid var(--bl-line);min-width:0;color:var(--bl-text-soft);background:transparent;font-weight:600}
.mva-viewer-steps button:hover{background:var(--bl-ice);border-color:var(--bl-line-strong)}
.mva-viewer-steps button[aria-pressed="true"]{border-color:var(--bl-blue);color:var(--bl-blue-deep);background:var(--bl-blue-soft)}
.mva-viewer-step-caption{color:var(--bl-text);font-size:.9rem;line-height:1.65;min-height:2.8em;margin:12px 0 7px}
.mva-viewer-boundary{display:block;color:var(--bl-muted);font-size:.74rem;line-height:1.6}
.mva-viewer-dialog{padding:0;border:1px solid var(--bl-line);border-radius:var(--bl-radius);width:min(1100px,96vw);max-width:96vw;max-height:96dvh;background:#fff;color:var(--bl-text);overflow:auto;box-shadow:var(--bl-shadow-lg)}
.mva-viewer-dialog::backdrop{background:rgba(20,34,59,.55);backdrop-filter:blur(6px)}
.mva-viewer.is-expanded .mva-viewer-surface{height:min(65dvh,780px)}
.mva-viewer.is-expanded .mva-interactive-art{height:100%;width:100%}
.mva-viewer.is-expanded .mva-viewer-tools{max-width:850px;margin:auto;padding:12px 24px 24px}

@media(max-width:1023px){
  .mva-mechanism-layout,.mva-atlas-record{grid-template-columns:1fr}
  .mva-mechanism-heading{display:block}
  .mva-mechanism-badge{display:inline-flex;margin:14px 0 0}
  .mva-gallery{grid-auto-columns:minmax(210px,calc((100% - 28px) / 3))}
}
@media(max-width:680px){
  :is(.mva-mechanism-controls,.mva-atlas-controls) label{flex-basis:100%;max-width:none}
  :is(.mva-mechanism-controls,.mva-atlas-controls) .bl-btn{flex:1;font-size:.8rem}
  .mva-mechanism-canvas-head{padding:12px 14px;font-size:.72rem}
  .mva-mechanism-canvas-head span:last-child{display:none}
  .mva-mechanism-legend{padding:8px 14px;font-size:.72rem;gap:8px 14px}
  .mva-mechanism-boundary{margin:10px 14px 16px;font-size:.8rem}
  .mva-mechanism-panel,.mva-atlas-evidence{padding:20px}
  .mva-mechanism-node-note{display:none}
  .mva-gallery{grid-auto-columns:minmax(200px,66%);gap:12px}
  .mva-gallery-card strong{font-size:.8rem;padding:0 12px}
  .mva-gallery-card>span:last-child{font-size:.68rem;padding:6px 12px 0}
  .mva-scene-heading{padding:18px 18px 14px}
  .mva-scene-heading h3{font-size:1.25rem}
  .mva-scene-caption{padding:14px 18px 18px;font-size:.84rem}
  .mva-scene-label{font-size:22px;letter-spacing:0}
  .mva-viewer-tools{padding:12px 16px 18px}
  .mva-viewer-tools button{padding:8px 10px;font-size:.78rem}
  .mva-viewer-toolbar{gap:5px}
  .mva-viewer-steps{gap:4px}
  .mva-viewer-steps button{font-size:.7rem;padding:9px 2px}
  .mva-viewer-label{font-size:18px;letter-spacing:0}
  .mva-viewer.is-expanded .mva-viewer-surface{height:57dvh}
  .mva-viewer.is-expanded .mva-viewer-tools{padding:10px 14px 18px}
  .mva-viewer-step-caption{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.mva-mechanism *,.mva-atlas *,.mva-scene-art *,.mva-viewer *{animation:none!important;transition:none!important}}
