/* "The small hole on top" (Access hole v002, final food-filled), owner-approved and locked 2026-10-29 (Daniel: "perfection- approved..."; Codex
   family-c/access-hole-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-access-hole, the h1/h2 rules
   moved to the component title (h3) and panel headings (h4), the review shell/note, page :root/body rules, page-width media rule and the
   @font-face dropped (the site's fonts.css supplies Nunito Sans). Values are unchanged. The arch header is the site's own chart-card band
   (answer-charts.css lines 14-24): the mask is the site file assets/arch-tile.svg (sha256 cd8e28f9...), referenced from this sheet's folder,
   never a copy. The 560/340 container queries are the lock's own, on the card. A final guard block keeps answer-body rules out. */
.dio-access-hole{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#2f4452;font-synthesis:none;font-size:16px;line-height:normal}
.dio-access-hole *{box-sizing:border-box}
.dio-access-hole .ah-card{margin:0;container-type:inline-size}.dio-access-hole .ah-surface{background:#f5f7f7}
.dio-access-hole .ah-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-access-hole .ah-field{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}
.dio-access-hole .ah-field>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-access-hole .ah-head h3.ah-title{font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}
.dio-access-hole .ah-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:26px 28px 12px}.dio-access-hole .ah-panel{min-width:0}
.dio-access-hole .ah-panel h4{font-size:20px;font-weight:500;line-height:1.3;margin:0 0 6px}
.dio-access-hole .ah-visual{position:relative;aspect-ratio:1/1;isolation:isolate}
.dio-access-hole .ah-visual img{display:block;width:100%;height:100%;object-fit:contain}
.dio-access-hole .ah-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#4c7288;stroke-width:1.2px}
.dio-access-hole .ah-leaders path{vector-effect:non-scaling-stroke}.dio-access-hole .ah-leaders circle{fill:#4c7288;stroke:none}
.dio-access-hole .ah-label{position:absolute;left:75%;width:25%;transform:translateY(-50%);font-size:16px;font-weight:500;line-height:1.22;color:#2f4452}
.dio-access-hole .ah-filling{top:18%}.dio-access-hole .ah-tape{top:34%}.dio-access-hole .ah-screw{top:50%}.dio-access-hole .ah-food-label{top:22%;left:72.5%;width:27.5%}
.dio-access-hole .ah-copy{font-size:18px;line-height:1.5;font-weight:400;margin:0;padding:20px 28px 22px;border-top:1px solid #cad5da}
.dio-access-hole .ah-card figcaption{font-size:14px;line-height:1.5;color:#506875;margin:16px 0 0}
.dio-access-hole .ah-playing .ah-field>i{animation:ah-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}.dio-access-hole .ah-paused *{animation-play-state:paused!important}
@keyframes ah-wave{from{background-position:100% 0}to{background-position:0 0}}
@container(max-width:560px){.dio-access-hole .ah-head h3.ah-title{font-size:23px}.dio-access-hole .ah-panels{grid-template-columns:1fr;gap:24px;padding:24px 24px 12px}.dio-access-hole .ah-panel h4{font-size:20px}.dio-access-hole .ah-label{font-size:17px}.dio-access-hole .ah-copy{font-size:17px;padding:20px 24px 22px}}
@container(max-width:340px){.dio-access-hole .ah-head h3.ah-title{font-size:22px}.dio-access-hole .ah-panels{padding:22px 20px 12px;gap:26px}.dio-access-hole .ah-label{font-size:15px}.dio-access-hole .ah-copy{font-size:17px;padding:20px}}
@media(prefers-reduced-motion:reduce){.dio-access-hole .ah-card *{animation:none!important}}
html.reduce-motion .dio-access-hole .ah-card *,html[data-motion="reduce"] .dio-access-hole .ah-card *,.dio-alive-off .dio-access-hole .ah-card *,.dio-access-hole .ah-card.dio-alive-off *{animation:none!important}
@media print{.dio-access-hole .ah-card *{animation:none!important}}
/* site guards (answer-body and header rules must not reach in; no visual change from the lock) */
.dio-access-hole.dio-access-hole h3.ah-title,.dio-access-hole.dio-access-hole .ah-panel h4{font-family:inherit;color:#2f4452;text-transform:none;max-width:none}
.dio-access-hole.dio-access-hole p.ah-copy{color:#2f4452;max-width:none}
.dio-access-hole.dio-access-hole .ah-visual img{max-width:none;width:100%;height:100%;border-radius:0;box-shadow:none;margin:0;object-fit:contain;aspect-ratio:auto}
.dio-access-hole.dio-access-hole svg.ah-leaders{max-width:none}
.dio-access-hole.dio-access-hole .ah-card figcaption{padding:0;text-align:left;background:none;font-style:normal}
/* 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-access-hole .ah-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-access-hole .ah-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-access-hole .ah-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-access-hole .ah-controls button:hover{background:#f1f5f6}.dio-access-hole .ah-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-access-hole .ah-controls button[aria-pressed=true]{background:#e6edf0}.dio-access-hole .ah-controls button:disabled{opacity:.55;cursor:default}
.dio-access-hole .ah-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-access-hole .ah-controls{display:none!important}}