/* Answer explainer animations (answer-anim.js, 2026-10-22). Site tokens from styles.css. Mineral stage, steel rule, ink text only. */
.ans-anim{margin:0;background:var(--mineral);color:var(--ink)}
.ans-anim-stage{position:relative}
.ans-anim-stage>svg,.ans-anim-stage>img{display:block;width:100%;height:auto}
.ans-anim-bar{display:flex;align-items:flex-start;gap:12px;padding:12px 16px 0}
.ans-anim-beats{flex:1;display:grid;margin:0;padding-top:2px;min-height:calc(2 * 1.4em);font-size:16px;line-height:1.4;font-weight:550}
.ans-anim-beats>span{grid-area:1/1;align-self:start}
.ans-anim figcaption{padding:8px 16px 14px;font-size:14px;line-height:1.45;color:var(--muted)}
.ans-anim figcaption a{color:var(--ink);text-underline-offset:4px;white-space:nowrap;display:inline-block;padding-block:8px;margin-block:-8px}
.ans-anim-toggle{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:2px solid var(--steel);border-radius:6px;background:#fff;color:var(--ink)}
.ans-anim-toggle svg{width:18px;height:18px;fill:currentColor}
.ans-anim-toggle:hover{background:var(--mist,#f1f5f6)}
/* 2026-11-11 audit: this toggle is the finish every animation's Replay / Still view row now uses. It sits at the right end of its bar, the side those
   rows sit on; the hover fill has a fallback because --mist is only defined on main pages (without it the white ground dropped out on hover). */
.ans-anim-bar .ans-anim-toggle{order:1;cursor:pointer}
.ans-anim-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ans-anim.is-paused *,.ans-anim.is-off *{animation-play-state:paused!important}
/* rested after one pass (answer-anim.js, dio-visuals.js): the drawing sits on its labelled still until the button plays it again */
.ans-anim.dio-rested *{animation:none!important}
/* 2026-11-11 watched review: at the end of the pass the drawing and its line fade out, then the still fades in, so two states are never on screen at once */
.ans-anim:not(.is-static) .ans-anim-stage,.ans-anim:not(.is-static) .ans-anim-beats{transition:opacity .3s linear}
.ans-anim.is-settling .ans-anim-stage,.ans-anim.is-settling .ans-anim-beats{opacity:0;transition-duration:.2s}
/* static-first (2026-11-03, GPT legacy-SVG fallback audit): until the controller has inserted the drawing and enrolled it (.is-live),
   nothing inside animates, so the SVG's base styles (the complete labelled still) show. A saved copy read with scripts blocked or
   off therefore shows every box and line instead of an entrance frozen at its first, empty frame. The build never saves .is-live. */
.ans-anim:not(.is-live) *{animation:none!important}
/* motion off: no animation anywhere inside, nothing to pause; the SVG's base styles are the still frame */
@media(prefers-reduced-motion:reduce){.ans-anim *{animation:none!important}.ans-anim-toggle{display:none}}
html.reduce-motion .ans-anim *{animation:none!important}
html.reduce-motion .ans-anim-toggle{display:none}
/* video drawing (answer-anim.js, 2026-11-12): a silent clip in the same stage. The stage keeps the entry's 1280:800 box and the clip fills it.
   The labelled still is the stage's background (set by the script while the figure rests: after the pass, or motion off); the clip is hidden then.
   The saved, script-free copy is that still and its line. The lines share one cell (so the tallest one sets the height), one showing at a
   time, and swap over 0.28 s as the tuned drawings do; the change to the still line is a cut. */
.ans-anim-video .ans-anim-stage{background-size:cover;background-position:center;background-repeat:no-repeat}
.ans-anim-video .ans-anim-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ans-anim-video.dio-rested .ans-anim-stage>video{visibility:hidden}
.ans-anim-video .ans-anim-beats>span{opacity:0;transition:opacity .28s linear}
.ans-anim-video .ans-anim-beats>span.is-on{opacity:1}
.ans-anim-video.dio-rested .ans-anim-beats>span{transition:none}
/* the button's place is kept where there is no button (the saved copy, motion off), so the lines wrap the same way and the card is one height in every state */
.ans-anim-video .ans-anim-bar:not(:has(.ans-anim-toggle)) .ans-anim-beats{margin-right:56px}
@media(max-width:600px){.ans-anim-video .ans-anim-bar:not(:has(.ans-anim-toggle)) .ans-anim-beats{margin-right:54px}}
/* header slot: the drawing replaces the 4:3 photo frame and keeps its own height */
section.answer-band figure.story-media.ans-anim-head{aspect-ratio:auto;overflow:visible;background:var(--mineral);border-radius:8px}
section.answer-band figure.story-media.ans-anim-head .ans-anim-stage{border-radius:8px 8px 0 0;overflow:hidden}
/* 2026-11-11 audit: beside a card taller than a laptop screen the headline was centred on the whole card, so it sat at the bottom of the
   first screen (765px down beside the 1,300px peri-implantitis card). It now centres on the part of the card the first screen shows.
   Cards that fit the screen are unchanged. */
@media(min-width:821px){.answer-band-grid>div:first-child{align-self:stretch;display:flex;flex-direction:column;justify-content:center;max-height:max(320px,calc(100vh - 230px))}
  .answer-band-grid>div:first-child>h1+.meta{margin-top:3px}} /* flex margins do not collapse: 12 + 3 keeps the old 15px gap */
/* 2026-11-11 audit: the consultation hero scales like a picture, so a narrower card is a shorter one: the quick answer now starts in the first laptop screen */
@media(min-width:821px){section.answer-band figure.story-media.ans-anim-widget:has(>.dio-who-does-what){max-width:420px}}
/* in the body, after a section */
.ans-anim-body{margin:34px 0 8px;border-top:2px solid var(--steel)}
/* widget (iceberg v002): the animation brings its own title, controls and caption; only the section link sits under it */
.ans-anim-body.ans-anim-widget{padding-top:22px}
section.answer-band figure.story-media.ans-anim-widget{background:#fff;padding:18px 16px 14px}
.ans-anim-widget>figcaption{padding:12px 0 0;text-align:center;font-size:14px;line-height:1.45}
.ans-anim-widget>figcaption a{color:var(--ink);text-underline-offset:4px;display:inline-block;padding-block:8px;margin-block:-8px}
@media(max-width:600px){.ans-anim-bar{padding:10px 12px 0;gap:10px}.ans-anim-beats{font-size:15px}.ans-anim figcaption{padding:6px 12px 12px;font-size:13.5px}}

/* Still diagrams (batch 2): keep text at reading size on wide screens */
.ans-anim.is-static{max-width:640px}
/* 2026-11-11 audit: drawings that scale like a picture filled the 1,184px column on laptops, so their lettering (31 to 43px) was larger than
   the page's headings and the airport map ran two screens. They are held to 640px and centred, as six-five-four, call-early and visit-steps
   already are. The cards drawn at phone size (.is-static) are held to 520px, where their title is the page's h2 size and their text the body size. */
.ans-anim-body.ans-anim:not(.ans-anim-widget){max-width:640px;margin-inline:auto}
.ans-anim-body.ans-anim.is-static{max-width:520px}
.ans-anim-body>:is(.dio-airports,.dio-prorated,.dio-three-tryins){max-width:640px;margin-inline:auto}