/* "Four materials, one weak spot" (what-are-full-arch-implant-teeth-made-of, #nanoceramic): owner-approved and locked 2026-10-29 (Daniel:
   "approved- send to lead to give to claude for publish"; Codex materials v002, final list). Site placement of the locked style.css: every rule
   scoped to .dio-materials, values unchanged; the h1/h2 rules style the widget's h3/h4; the page shell, controls, button rules and @font-face are
   dropped (the site's fonts.css supplies Nunito Sans); the 600/350 media queries are container queries on the widget; the arch mask is the site's
   own assets/arch-tile.svg, resolved from this stylesheet's folder. */
.dio-materials{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--ink:#203846;--steel:#4c7288;font-family:var(--font);color:var(--ink);font-synthesis:none;container-type:inline-size}
.dio-materials *{box-sizing:border-box}
.dio-materials figure.mt-figure{margin:0}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-materials .materials-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-materials .mt-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-materials .mt-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-materials .materials.is-playing .mt-header-art>i{animation:materials-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes materials-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-materials .materials{background:#f5f7f7}.dio-materials .materials-header{overflow:hidden}.dio-materials .materials-header h3{position:relative;margin:0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-materials .mt-list{list-style:none;margin:0;padding:0}.dio-materials .mt-item{padding:24px 28px 25px;border-bottom:1px solid #d8e1e6}.dio-materials .mt-item h4{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.012em;margin:0 0 8px}.dio-materials .mt-item p{font-size:16px;line-height:1.55;font-weight:400;margin:0;max-width:54ch}.dio-materials .mt-item.mt-current{background:#e7eef2;border-left:3px solid #ed873c;padding-left:25px}.dio-materials .mt-current h4{font-weight:600}.dio-materials .mt-date{white-space:nowrap}
.dio-materials .mt-conclusion{padding:21px 28px 24px}.dio-materials .mt-conclusion p{font-size:16px;line-height:1.55;font-weight:400;margin:0}.dio-materials .mt-conclusion p+p{margin-top:4px;font-weight:500}
.dio-materials .mt-caption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}
.dio-materials .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-materials .materials.is-playing .mt-item{animation:mt-arrive .7s cubic-bezier(.22,.7,.25,1) .25s both}.dio-materials .materials.is-playing .mt-item:nth-child(2){animation-delay:.6s}.dio-materials .materials.is-playing .mt-item:nth-child(3){animation-delay:.95s}.dio-materials .materials.is-playing .mt-item:nth-child(4){animation-delay:1.3s}.dio-materials .materials.is-playing .mt-conclusion{animation:mt-arrive .7s ease 2s both}@keyframes mt-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dio-materials .materials.is-paused *{animation-play-state:paused!important}
@container (max-width:600px){.dio-materials .materials-header h3{font-size:23px}.dio-materials .mt-item{padding:22px 20px 23px}.dio-materials .mt-item h4{font-size:19px}.dio-materials .mt-item.mt-current{padding-left:17px}.dio-materials .mt-conclusion{padding:20px 20px 23px}.dio-materials .mt-caption{padding-inline:4px}}
@container (max-width:350px){.dio-materials .materials-header{padding-inline:20px}.dio-materials .mt-item{padding-inline:16px}.dio-materials .mt-item h4{font-size:18px}.dio-materials .mt-item.mt-current{padding-left:13px}.dio-materials .mt-conclusion{padding-inline:16px}}
html:is(.reduce-motion,.dio-alive-off) .dio-materials .materials *,body:is(.reduce-motion,.dio-alive-off) .dio-materials .materials *,.dio-alive-off .dio-materials .materials *{animation:none!important}.dio-materials .materials:not(.is-playing) .mt-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-materials .materials *{animation:none!important}.dio-materials .mt-header-art>i{background-position:0 0!important}}
@media print{.dio-materials .materials *{animation:none!important}}

/* site guards: answer-body rules (section.part p/li, .ans-anim figcaption) must not reach in */
.dio-materials h3,.dio-materials h4{font-family:inherit;color:#203846;text-transform:none}
.dio-materials .mt-list>li{margin:0;list-style:none}
.dio-materials .mt-item p,.dio-materials .mt-conclusion p{color:#203846}
.dio-materials figure.mt-figure figcaption.mt-caption{background:none;font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}
/* 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-materials .mt-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-materials .mt-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-materials .mt-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-materials .mt-controls button:hover{background:#f1f5f6}.dio-materials .mt-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-materials .mt-controls button[aria-pressed=true]{background:#e6edf0}.dio-materials .mt-controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-materials .mt-controls{display:none!important}}