/* "Each step rests on the one before" (guide chain), owner-approved and locked 2026-10-29 (Daniel: "approved- send to lead to give to claude
   for publishing"; Codex family-c/guide-chain-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to
   .dio-guide-chain, classes/ids/keyframes/custom properties prefixed gc-, h1 shown as the component title (h3) and h2 as h4, the page shell
   (main, body, :root, global button rules), the private Replay/Still controls and the font-face dropped (fonts.css supplies Nunito Sans).
   Values are unchanged. The arch header uses the site's own tile (assets/arch-tile.svg, sha256 cd8e28f9..., 179.4 px) with the chart-card
   header recipe from answer-charts.css; the url() is relative to this file. Breakpoints follow the component's own width (container queries). */
.dio-guide-chain{--gc-font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--gc-ink:#203846;--gc-steel:#4c7288;--gc-shift-y:9.778631%;--gc-pivot-y:21.641970%;font-family:var(--gc-font);color:var(--gc-ink);font-synthesis:none;font-size:16px;line-height:normal;container-type:inline-size}
.dio-guide-chain *{box-sizing:border-box}
.dio-guide-chain .gc-figure{margin:0;padding:0}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-guide-chain .gc-header{position:relative;isolation:isolate;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-guide-chain .gc-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-guide-chain .gc-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-guide-chain .gc-chain.gc-is-playing .gc-header-art>i{animation:gc-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes gc-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-guide-chain .gc-chain{background:#f5f7f7}
.dio-guide-chain .gc-header{overflow:hidden}
.dio-guide-chain .gc-header h3.gc-title{position:relative;margin:0;font-family:var(--gc-font);color:var(--gc-ink);font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-guide-chain .gc-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:27px 20px 0}
.dio-guide-chain .gc-case{min-width:0}
.dio-guide-chain .gc-case-heading{text-align:center;min-height:62px}
.dio-guide-chain .gc-case h4.gc-case-title{font-family:var(--gc-font);color:var(--gc-ink);font-size:19px;font-weight:600;line-height:1.3;margin:0;letter-spacing:normal}
.dio-guide-chain .gc-case-heading p{font-size:14px;font-weight:400;line-height:1.4;color:#536b79;margin:4px 0 0}
.dio-guide-chain .gc-model-scene{position:relative;aspect-ratio:1;overflow:hidden}
.dio-guide-chain .gc-rig,.dio-guide-chain .gc-planned-reference{position:absolute;inset:0;width:100%;height:100%}
.dio-guide-chain .gc-rig img{display:block;width:100%;height:100%;object-fit:contain}
.dio-guide-chain .gc-rig--off{transform-origin:50% var(--gc-pivot-y);transform:translateY(var(--gc-shift-y)) rotate(4deg)}
.dio-guide-chain .gc-planned-reference{display:block;pointer-events:none;opacity:.8}
.dio-guide-chain .gc-planned-label{position:absolute;right:7%;top:4%;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1.4;color:#536f80}
.dio-guide-chain .gc-planned-label i{width:20px;border-top:1.5px dashed #536f80}
.dio-guide-chain .gc-takeaway{font-size:17px;line-height:1.5;font-weight:500;text-align:center;margin:0;padding:23px 28px 27px;color:var(--gc-ink)}
.dio-guide-chain .gc-research{margin-top:12px;border-bottom:1px solid #d7e1e6}
.dio-guide-chain .gc-research summary{font-size:14px;line-height:1.4;font-weight:500;color:#4c7288;min-height:44px;padding:13px 0;cursor:pointer}
.dio-guide-chain .gc-research summary:focus-visible{outline:3px solid #4c7288;outline-offset:3px}
.dio-guide-chain .gc-research p{font-size:14px;line-height:1.6;font-weight:400;color:#536b79;margin:3px 0 20px}
.dio-guide-chain .gc-research a{color:#355d73;text-underline-offset:3px}
.dio-guide-chain .gc-sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-guide-chain .gc-chain.gc-is-playing .gc-rig--off{animation:gc-shift 1.2s cubic-bezier(.22,.7,.25,1) 1.2s both}
.dio-guide-chain .gc-chain.gc-is-playing .gc-planned-reference{animation:gc-reference .6s ease .7s both}
@keyframes gc-shift{from{transform:translateY(0) rotate(0)}to{transform:translateY(var(--gc-shift-y)) rotate(4deg)}}
@keyframes gc-reference{from{opacity:0}to{opacity:.8}}
.dio-guide-chain .gc-chain.gc-is-paused *{animation-play-state:paused!important}
@container (max-width:600px){.dio-guide-chain .gc-header h3.gc-title{font-size:22px}.dio-guide-chain .gc-comparison{gap:12px;padding:25px 10px 0}.dio-guide-chain .gc-case-heading{min-height:66px}.dio-guide-chain .gc-case h4.gc-case-title{font-size:17px}.dio-guide-chain .gc-case-heading p{font-size:14px}.dio-guide-chain .gc-takeaway{font-size:16px;padding:23px 23px 25px}.dio-guide-chain .gc-desktop-break{display:none}.dio-guide-chain .gc-planned-label{right:2%;top:1%;font-size:11px;gap:4px}.dio-guide-chain .gc-planned-label i{width:12px}.dio-guide-chain .gc-research summary{font-size:14px}}
@container (max-width:350px){.dio-guide-chain .gc-header{padding-inline:20px}.dio-guide-chain .gc-comparison{gap:8px;padding-inline:8px}.dio-guide-chain .gc-case h4.gc-case-title{font-size:16px}.dio-guide-chain .gc-takeaway{padding-inline:19px}.dio-guide-chain .gc-planned-label{font-size:10px}.dio-guide-chain .gc-planned-label i{width:9px}}
html:is(.reduce-motion,.dio-alive-off) .dio-guide-chain .gc-chain *{animation:none!important}
.dio-guide-chain .gc-chain:not(.gc-is-playing) .gc-header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-guide-chain .gc-chain *{animation:none!important}.dio-guide-chain .gc-header-art>i{background-position:0 0!important}}
@media print{.dio-guide-chain .gc-chain *{animation:none!important}.dio-guide-chain .gc-research p{display:block!important}}
/* site guards (no visual change from the lock): the answer body's p/li/img rules and image styling stay out */
.dio-guide-chain .gc-rig img,.dio-guide-chain img.gc-planned-reference{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:none}
.dio-guide-chain .gc-research details,.dio-guide-chain details.gc-research{padding: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-guide-chain .gc-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-guide-chain .gc-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-guide-chain .gc-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-guide-chain .gc-controls button:hover{background:#f1f5f6}.dio-guide-chain .gc-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-guide-chain .gc-controls button[aria-pressed=true]{background:#e6edf0}.dio-guide-chain .gc-controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-guide-chain .gc-controls{display:none!important}}