/* "Your first three days" (first-72-hours-after-implant-surgery, #day-two): owner-approved and locked 2026-10-28 (Daniel: "approved... send to lead
   to give to claude and ask for next job"; Codex first-days v002, header-only revision: accepted original body, authentic arch header). Site
   placement of the locked style.css: every rule scoped to .dio-first-days, the h1 rule restyles the h3, the review shell, private Replay/Still
   controls (review-only per the handoff), body rules and @font-face dropped (fonts.css supplies Nunito Sans). The page-width rule becomes a
   container rule on the figure: the package's 600px screen with 12px side padding is a 576px figure, and its vw sizes are rewritten on the
   figure's own width so every size matches (4.67vw = 4.67cqw + 1.12px; 15.67vw = 15.67cqw + 3.76px). The arch band masks the site's own
   assets/arch-tile.svg (resolved from this stylesheet's folder). Values are unchanged. Clinical review stays awaiting sign-off. */
.dio-first-days{font-family:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;color:#203846;font-synthesis:none}
.dio-first-days *{box-sizing:border-box}
/* the package never draws wider than 600px (main max-width 648px less 24px padding a side); the SVG body scales with width, so the figure
   keeps that maximum and centres in a wider column, as in the package */
.dio-first-days .fd-figure{margin:0 auto;max-width:600px;container-type:inline-size}
.dio-first-days .first-days{background:#f5f7f7}
.dio-first-days .first-days-header{height:94px;display:flex;align-items:center}
.dio-first-days .first-days-header h3{position:relative;margin:0;font:600 28px/1.25 'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif}
.dio-first-days .df7{display:block;width:100%;height:auto;overflow:hidden}
.dio-first-days figcaption{font-size:12px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}
.dio-first-days .first-days.is-paused *{animation-play-state:paused!important}
@container(max-width:576px){.dio-first-days .first-days-header h3{font-size:clamp(20px,calc(4.67cqw + 1.12px),28px)}.dio-first-days .first-days-header{height:clamp(72px,calc(15.67cqw + 3.76px),94px)}}
html.reduce-motion .dio-first-days .first-days *,html.dio-alive-off .dio-first-days .first-days *{animation:none!important}.dio-first-days .first-days:not(.is-playing) .header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-first-days .first-days *{animation:none!important}.dio-first-days .header-art>i{background-position:0 0!important}}
@media print{.dio-first-days .first-days *{animation:none!important}}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-first-days .first-days-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-first-days .header-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
  -webkit-mask-size:179.4px 179.4px,100% 100%;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* resting state is the end frame: steel lines, the orange crest already past */
.dio-first-days .header-art>i{position:absolute;inset:0;background:linear-gradient(115deg,rgba(76,114,136,.20) 0%,rgba(76,114,136,.20) 30%,rgba(76,114,136,.34) 40%,rgba(237,135,60,.55) 47%,rgba(76,114,136,.30) 54%,rgba(76,114,136,.20) 64%,rgba(76,114,136,.20) 100%);background-size:300% 100%;background-position:0 0}
.dio-first-days .first-days.is-playing .header-art>i{animation:first-days-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes first-days-wave{from{background-position:100% 0}to{background-position:0 0}}

.dio-first-days .df7 text{fill:#203846}
.dio-first-days .df7 text.df7-st{fill:#4c7288}
.dio-first-days .df7 text.df7-mu{fill:#506875}
.dio-first-days .df7 text.df7-wt{fill:#fff}
.dio-first-days .first-days.is-playing .df7-in{animation:df7-in .7s cubic-bezier(.22,.7,.25,1) both}
@keyframes df7-in{from{opacity:0;transform:translateY(14px)}}
.dio-first-days .first-days.is-playing .df7-fade{animation:df7-fade .8s ease both}
@keyframes df7-fade{from{opacity:0}}
.dio-first-days .df7-dot{opacity:0}.dio-first-days .first-days.is-playing .df7-dot{animation:df7-dot 3.4s cubic-bezier(.45,.05,.35,1) .4s 1 both}@keyframes df7-dot{0%{opacity:0;transform:translateY(0)}8%{opacity:1;transform:translateY(0)}45%{transform:translateY(138px)}55%{transform:translateY(138px)}90%{opacity:1;transform:translateY(306px)}100%{opacity:0;transform:translateY(306px)}}
@media (prefers-reduced-motion:reduce){.dio-first-days .df7 *{animation:none!important}}
html.reduce-motion .dio-first-days .df7 *{animation:none!important}

/* site guards: answer-body rules (section.part h3, .ans-anim figcaption) must not reach in */
.dio-first-days h3{color:#203846;text-transform:none;letter-spacing:normal}
.dio-first-days figcaption{margin:0;background:none}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z). One row above the figure, right side,
   wrapping on narrow widths, outside the title band; button look, focus ring and print rule follow the adapters that already ship controls. */
.dio-first-days .fd-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:600px;margin:0 auto 12px;padding:0}
.dio-first-days .fd-controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-first-days .fd-controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;cursor:pointer}
.dio-first-days .fd-controls button:hover{background:#f1f5f6}.dio-first-days .fd-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-first-days .fd-controls button[aria-pressed=true]{background:#e6edf0}.dio-first-days .fd-controls button:disabled{opacity:.55;cursor:default}
.dio-first-days .fd-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media print{.dio-first-days .fd-controls{display:none!important}}