/* Biospan brochure viewer introduction (PR-21, 14 Sep 2026).
   Two steps, shown once per browser. Step one is a native <dialog> in the top
   layer: two cover mockups, the title, one sentence, a close icon and "Got it".
   Step two dims the page with a fixed shade and raises the REAL guide toggle
   above it, with an arrow and a hint pointing at it. Only the toggle itself is
   raised (position + z-index on that one element), never an ancestor, so the
   navigation the tour points at is the navigation the reader clicks.
   Nothing here restyles the pages, and nothing here reaches the printed PDF:
   the build composes the PDF from the page nodes alone, and the print block at
   the end removes the introduction in any case. */

/* Step one */
.guide-intro{box-sizing:border-box;border:0;border-radius:14px;padding:34px 36px 32px;width:min(460px,calc(100vw - 32px));max-height:90dvh;overflow:auto;text-align:center;background:#fff;color:var(--ink);box-shadow:0 24px 100px #00000055;font-family:var(--sans)}
.guide-intro::backdrop{background:rgba(12,12,22,.73)}
.guide-intro-close{position:absolute;right:12px;top:8px;background:transparent;font-size:26px;line-height:1;padding:6px 11px;color:var(--muted)}
.guide-intro-close:hover{color:var(--ink)}
.guide-intro-covers{display:flex;justify-content:center;gap:18px;margin:10px 0 26px;perspective:800px}
.guide-intro-cover{width:126px;margin:0;transform:rotate(-7deg);animation:guide-intro-arrive .55s ease-out both}
.guide-intro-cover+.guide-intro-cover{transform:rotate(7deg);animation-delay:.1s}
.guide-intro-cover img{width:100%;aspect-ratio:1/1.4142;height:auto;object-fit:cover;background:#fff;box-shadow:5px 9px 16px #00000033}
.guide-intro-cover figcaption{margin-top:11px;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.guide-intro h2{font:400 30px/1.2 var(--serif);letter-spacing:-.02em;margin:0 0 12px}
.guide-intro p{font-size:14px;line-height:1.6;margin:0 0 24px;color:var(--muted)}
@keyframes guide-intro-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* Step two */
/* Same dark wash as step one, over the viewer's own `dialog::backdrop` blur
   (styles.css), so the two steps read as one treatment. */
.guide-tour-shade{position:fixed;inset:0;background:rgba(12,12,22,.73);backdrop-filter:blur(4px);z-index:9000}
/* The one element raised above the shade. `.brochure-switch` is a grid item of
   `.reader-bar`, and no ancestor of it makes a stacking context, so this z-index
   is read against the root: the real toggle paints over the shade and stays
   clickable, everything else stays under it. */
.brochure-switch.guide-tour-target{position:relative;z-index:9001;border-radius:9px;box-shadow:0 0 0 5px #fff,0 0 0 8px #ac9bed,0 10px 40px #00000059}
.guide-tour-tip{position:fixed;z-index:9002;width:min(300px,calc(100vw - 24px));box-sizing:border-box;padding:24px;background:#fff;border-radius:12px;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;text-align:center;box-shadow:0 18px 50px #00000038}
.guide-tour-tip strong{display:block;font-size:18px;font-weight:500}
.guide-tour-tip p{margin:9px 0 18px;color:var(--muted)}
.guide-tour-arrow{position:absolute;left:clamp(20px,var(--guide-arrow-x,150px),calc(100% - 20px));transform:translateX(-50%);top:-40px;width:26px;height:34px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guide-tour-tip.above .guide-tour-arrow{top:auto;bottom:-40px;transform:translateX(-50%) rotate(180deg)}

/* Both buttons */
.guide-intro-done,.guide-tour-done{border:0;border-radius:6px;padding:12px 32px;background:#4940de;color:#fff;font-weight:600;transition:transform .18s ease,background-color .18s ease}
.guide-intro-done:hover:not(:disabled),.guide-tour-done:hover:not(:disabled){background:#3d34c4;color:#fff;transform:scale(1.035)}
.guide-intro-done:active,.guide-tour-done:active{transform:scale(.99)}
.guide-intro-done:focus-visible,.guide-tour-done:focus-visible,.guide-intro-close:focus-visible{outline:3px solid #9c8ee9;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
 .guide-intro-cover{animation:none}
 .guide-intro-done,.guide-tour-done{transition:none}
 .guide-intro-done:hover:not(:disabled),.guide-tour-done:hover:not(:disabled),.guide-intro-done:active,.guide-tour-done:active{transform:none}
}

@media(max-width:480px){
 .guide-intro{padding:26px 22px 24px}
 .guide-intro h2{font-size:26px}
 .guide-intro-cover{width:104px}
 .guide-intro-covers{gap:14px;margin-top:14px}
}

/* The introduction never prints. The build's PDF document is composed from the
   page nodes alone and never loads guide-intro.js, so these elements cannot
   exist there; this rule covers a reader printing the page from the browser. */
@media print{.guide-intro,.guide-tour-shade,.guide-tour-tip{display:none!important}.brochure-switch.guide-tour-target{box-shadow:none!important}}