/* "The short way and the long way" (call-early v002), owner-approved and locked 2026-10-29 (Daniel: "Beautiful... send to lead to give to claude
   for publishing..."; Codex call-early v002). Site placement of the locked style.css: every rule scoped to .dio-call-early, values unchanged.
   Dropped: @font-face (site fonts.css), :root/body/main rules, the review-only Replay/Still controls and button styles. The h1 rule styles the h3 the
   site uses. The two page media rules became container rules on the component width (the locked main padded the figure by 12 px a side under
   560 px, so 560/350 px pages = 536/326 px components). Measured route lengths, own-end dash cleanup and endpoint timing as locked. The arch band
   masks with the site's own assets/arch-tile.svg; one 4.4 s pass after .2 s, ending 0 0. Keyframes renamed cew- so no other page rule can collide. */
.dio-call-early{--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-call-early *{box-sizing:border-box}
.dio-call-early .call-early-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-call-early .ce-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}

.dio-call-early .ce-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-call-early .call-early.is-playing .ce-header-art>i{animation:cew-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes cew-wave{from{background-position:100% 0}to{background-position:0 0}}

.dio-call-early .cew-figure{margin:0}
.dio-call-early .call-early{background:#f5f7f7}.dio-call-early .call-early-header{overflow:hidden}.dio-call-early .call-early-header h3{position:relative;margin:0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-call-early .ce-body{padding:24px 24px 25px}.dio-call-early .ce-diagram{position:relative;height:auto;aspect-ratio:600/320}.dio-call-early .ce-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.dio-call-early .ce-map-mobile{display:none}.dio-call-early .ce-map path,.dio-call-early .ce-map circle,.dio-call-early .ce-map rect{vector-effect:non-scaling-stroke}.dio-call-early .ce-short{fill:none;stroke:#4c7288;stroke-width:4;stroke-linecap:round}.dio-call-early .ce-long{fill:none;stroke:#94a5ae;stroke-width:4;stroke-linecap:round}.dio-call-early .ce-dot{fill:#fff;stroke:#4c7288;stroke-width:1.8}.dio-call-early .ce-origin-dot{fill:#4c7288;stroke:#4c7288;stroke-width:1.5}.dio-call-early .ce-end{fill:#f5d7bd;stroke:#c88a5a;stroke-width:1.5}.dio-call-early .ce-check{fill:none;stroke:#805634;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dio-call-early .ce-delay-end{fill:#e1e8ec;stroke:#879da9;stroke-width:1.6}
.dio-call-early .ce-diagram p,.dio-call-early .ce-diagram ol{margin:0}.dio-call-early .ce-start{position:absolute;left:0;top:50%;width:22%;transform:translateY(-50%);font-size:17px;font-weight:500;line-height:1.35;text-align:center}.dio-call-early .ce-route{list-style:none;padding:0}.dio-call-early .ce-step{position:absolute;top:35%;width:20%;text-align:center;font-size:16px;font-weight:500;line-height:1.4}.dio-call-early .ce-a{left:30%}.dio-call-early .ce-b{left:55%}.dio-call-early .ce-c{left:80%}.dio-call-early .ce-step span,.dio-call-early .ce-start span,.dio-call-early .ce-delay-result span{display:block}.dio-call-early .ce-delay-label{position:absolute;left:40%;top:54%;width:40%;text-align:center;font-size:15px;font-weight:400;line-height:1.4;color:#607986}.dio-call-early .ce-delay-result{position:absolute;left:80%;top:83%;width:20%;text-align:center;font-size:16px;font-weight:500;line-height:1.4}
.dio-call-early .ce-note{padding:22px 28px 24px;background:#e8eff3;border-top:1px solid #d4dfe5}.dio-call-early .ce-note p{font-size:16px;line-height:1.55;font-weight:400;margin:0}.dio-call-early .ce-caption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0}
.dio-call-early .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-call-early .ce-map .ce-short,.dio-call-early .ce-map .ce-long{vector-effect:none}
.dio-call-early .call-early.is-playing .ce-short{stroke-dasharray:var(--ce-length) var(--ce-length);animation:cew-route-draw 1.35s linear .15s both}.dio-call-early .call-early.is-playing .ce-long{stroke-dasharray:var(--ce-length) var(--ce-length);animation:cew-route-draw 2.8s linear .15s both}
.dio-call-early .call-early.is-playing .ce-short.is-drawn,.dio-call-early .call-early.is-playing .ce-long.is-drawn{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.dio-call-early .call-early.is-playing .ce-step,.dio-call-early .call-early.is-playing .ce-step-dot{animation:cew-appear .25s ease .82s both}.dio-call-early .call-early.is-playing .ce-b,.dio-call-early .call-early.is-playing .ce-node-b{animation-delay:1.2s}.dio-call-early .call-early.is-playing .ce-c,.dio-call-early .call-early.is-playing .ce-node-c{animation-delay:1.52s}.dio-call-early .call-early.is-playing .ce-delay-label{animation:cew-appear .35s ease .45s both}.dio-call-early .call-early.is-playing .ce-delay-result,.dio-call-early .call-early.is-playing .ce-delay-end{animation:cew-appear .25s ease 3s both}.dio-call-early .call-early.is-playing .ce-note{animation:cew-appear .4s ease 3.25s both}
@keyframes cew-route-draw{from{stroke-dashoffset:var(--ce-length)}to{stroke-dashoffset:0}}@keyframes cew-appear{from{opacity:0}to{opacity:1}}.dio-call-early .call-early.is-paused *{animation-play-state:paused!important}
@container(max-width:536px){.dio-call-early .call-early-header h3{font-size:23px}.dio-call-early .ce-body{padding:25px 20px 24px}.dio-call-early .ce-diagram{height:auto;aspect-ratio:300/460;max-width:360px;margin-inline:auto}.dio-call-early .ce-map-desktop{display:none}.dio-call-early .ce-map-mobile{display:block}.dio-call-early .ce-start{left:29%;top:0;width:42%;transform:none;font-size:17px}.dio-call-early .ce-step{left:21%;width:31%;transform:translateY(-50%);font-size:16px}.dio-call-early .ce-a{top:28.7%}.dio-call-early .ce-b{top:50%}.dio-call-early .ce-c{top:71.74%}.dio-call-early .ce-delay-label{left:52%;top:18%;width:35%;font-size:15px}.dio-call-early .ce-delay-result{left:59.1666667%;top:88%;width:39%;font-size:16px}.dio-call-early .ce-note{padding:21px 20px 23px}.dio-call-early .ce-caption{padding-inline:4px}}
@container(max-width:326px){.dio-call-early .call-early-header{padding-inline:20px}.dio-call-early .ce-body{padding-inline:16px}.dio-call-early .ce-start{font-size:16px}.dio-call-early .ce-note{padding-inline:16px}}
html.reduce-motion .dio-call-early .call-early *,html.dio-alive-off .dio-call-early .call-early *{animation:none!important}.dio-call-early .call-early:not(.is-playing) .ce-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-call-early .call-early *{animation:none!important}.dio-call-early .ce-header-art>i{background-position:0 0!important}}
@media print{.dio-call-early .call-early *{animation:none!important}}

/* site guards: answer-body rules (section.part p/li, ol, .ans-anim figcaption, h3) must not reach in; values as locked */
.dio-call-early .call-early-header h3{font-family:inherit;color:var(--ink);text-transform:none;padding:0}
.dio-call-early p{max-width:none}.dio-call-early .ce-route{margin:0}.dio-call-early .ce-route>li{list-style:none;margin:0;padding:0}
.dio-call-early .cew-figure figcaption{background:none}
.dio-call-early svg{max-width:none}
.dio-call-early .sr-only{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}
/* approved size (2026-11-03): GPT's locked page showed this figure at most 640 px wide; its drawing scales with width, so the wide answer column caps it there, centred */
.dio-call-early{max-width:640px;margin-inline:auto}
/* 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-call-early .cew-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-call-early .cew-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-call-early .cew-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-call-early .cew-controls button:hover{background:#f1f5f6}.dio-call-early .cew-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-call-early .cew-controls button[aria-pressed=true]{background:#e6edf0}.dio-call-early .cew-controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-call-early .cew-controls{display:none!important}}