/* "Three airports, one office", owner-approved and locked 2026-10-29 (Codex family-c/airports-v002, APPROVED-LOCK.json).
   Site placement of the locked style.css: every rule scoped to .dio-airports, values unchanged; the page's @font-face, :root/body/main
   rules and the private page padding are dropped (Nunito Sans comes from the site's fonts.css); the h1 rule styles the component title h3.
   The locked 600px desktop/phone switch is a container query on the component (as in the lock); the page-level 600px rules (title, controls,
   caption size) now follow the component's width too. The arch band is the site's own chart-card header (answer-charts.css lines 14-24): its
   mask is the site file assets/arch-tile.svg (sha256 cd8e28f9...), referenced from this sheet's folder, never a copy. A few guards stop
   site-wide svg, button, heading, paragraph and figcaption rules reaching in. */
.dio-airports{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--ink:#203846;--steel:#4c7288;color:var(--ink);font-family:var(--font);font-synthesis:none;background:#fff;container-type:inline-size;text-align:left;font-size:16px;line-height:normal}
.dio-airports *{box-sizing:border-box}
.dio-airports .controls{display:flex;gap:10px;margin:0 0 16px}.dio-airports .controls[hidden]{display:none}
.dio-airports button{font:500 14px/1.2 var(--font);color:var(--ink);border:1px solid #a9b8bf;border-radius:2px;background:#fff;min-height:48px;min-width:86px;padding:10px 16px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;margin:0}
.dio-airports button:hover{background:#f1f5f6;border-color:var(--ink)}.dio-airports button:focus-visible{outline:3px solid var(--steel);outline-offset:3px}
.dio-airports button[aria-pressed=true]{background:#e6edf0;border-color:var(--steel)}.dio-airports button:disabled{opacity:.55;cursor:default}
.dio-airports figure{margin:0;padding:0;background:none}
.dio-airports .ap-widget{container-type:inline-size}
.dio-airports .ap-card{background:#f5f7f7;border-top:2px solid #4c7288;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.dio-airports .ap-head{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da;display:block}
.dio-airports .ap-head .ap-title{font-family:var(--font);color:var(--ink);font-size:23px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}
.dio-airports .ap-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-airports .ap-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-airports[data-motion=active] .ap-field>i{animation:ap-header-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both;animation-play-state:paused}
@keyframes ap-header-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-airports .ap-map{background:#f5f7f7}
.dio-airports svg.am{display:block;width:100%;max-width:none;height:auto;font-family:var(--font);border-radius:0}.dio-airports svg.am-phone{display:none}
.dio-airports .am-text{fill:var(--ink)}.dio-airports .am-ocean{fill:var(--steel);font-style:italic}
.dio-airports .am-road-edge,.dio-airports .am-road,.dio-airports .am-route,.dio-airports .am-local{fill:none;stroke-linecap:round;stroke-linejoin:round}
.dio-airports .am-road-edge{stroke:#dce5e9;stroke-width:14}.dio-airports .am-road{stroke:#fff;stroke-width:8}.dio-airports .am-route{stroke:var(--steel);stroke-width:4}.dio-airports .am-local{stroke:#688594;stroke-width:2;stroke-dasharray:2 5}
.dio-airports p.ap-concierge{font-family:var(--font);color:var(--ink);font-size:18px;line-height:1.5;font-weight:400;margin:0;padding:18px 28px 24px;border-top:1px solid #dce5e9}
.dio-airports figure figcaption{font-family:var(--font);font-size:14px;line-height:1.5;color:#536b79;text-align:center;padding:16px 8px 0;margin:0;font-style:normal}
.dio-airports .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;margin:0;padding:0}
@container (max-width:600px){.dio-airports svg.am-desktop{display:none}.dio-airports svg.am-phone{display:block}.dio-airports .ap-head{padding-inline:28px}.dio-airports .ap-head .ap-title{font-size:21px}.dio-airports p.ap-concierge{font-size:16px;padding:16px 22px 22px}.dio-airports .controls{gap:8px}.dio-airports button{min-width:86px;padding-inline:14px}.dio-airports figure figcaption{font-size:12px}}
@media(prefers-reduced-motion:reduce){.dio-airports .ap-field>i{animation:none!important;background-position:0 0!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-airports .ap-field>i,body:is(.reduce-motion,.dio-alive-off) .dio-airports .ap-field>i,html[data-motion=reduce] .dio-airports .ap-field>i,.dio-alive-off .dio-airports .ap-field>i{animation:none!important;background-position:0 0!important}
@media print{.dio-airports .controls{display:none!important}.dio-airports .am-route{stroke-dasharray:none!important;stroke-dashoffset:0!important}.dio-airports .ap-field>i{animation:none!important;background-position:0 0!important}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-airports.dio-airports .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-airports.dio-airports .controls[hidden]{display:none}
.dio-airports.dio-airports .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;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-airports.dio-airports .controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-airports.dio-airports .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-airports.dio-airports .controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-airports.dio-airports .controls button:disabled{opacity:.55;color:#203846;cursor:default}
@media print{.dio-airports.dio-airports .controls{display:none!important}}
/* end animation controls */