/* "Where the bar is set", owner-approved and locked 2026-10-29 (Daniel: "approved, send to lead for publish with claude, request next
   project"; Codex family-c/where-bar-v002, APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-where-bar,
   the review page's @font-face, :root, body and .wb-demo page-width rules dropped (Nunito Sans comes from the site's fonts.css), h1 shown as
   the component title h3 and the h2 headings as h4. Values are unchanged. The arch tile is the site's own assets/arch-tile.svg
   (byte-identical to the lock's art/arch-tile.svg). Breakpoints follow the component's width (container queries). */
.dio-where-bar{font-family:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;color:#203846;background:#fff;font-synthesis:none}
.dio-where-bar *{box-sizing:border-box}
.dio-where-bar :is(h3,h4){font-family:inherit;color:inherit}
.dio-where-bar .wb-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid var(--wb-line)}
.dio-where-bar .wb-head h3{max-width:32ch;margin:0;font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-wrap:pretty}
.dio-where-bar .wb-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-where-bar .wb-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-where-bar .wb-demo[data-motion=active] .wb-field>i{animation:wb-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both;animation-play-state:paused}
@keyframes wb-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-where-bar .wb-demo{margin:0}
.dio-where-bar .wb-controls{display:flex;justify-content:flex-end;gap:8px;margin:0 0 12px}
.dio-where-bar .wb-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-where-bar .wb-controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;cursor:pointer}
.dio-where-bar .wb-controls button:hover{background:#f1f5f6}.dio-where-bar .wb-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-where-bar .wb-controls button[aria-pressed=true]{background:#e6edf0}.dio-where-bar .wb-controls button:disabled{opacity:.55;cursor:default}
.dio-where-bar .wb-widget{--wb-ink:#203846;--wb-steel:#4c7288;--wb-body:#506875;--wb-orange:#ed873c;--wb-line:#cad5da;container-type:inline-size;margin:0;color:var(--wb-ink);font-family:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif}
.dio-where-bar .wb-panel{border-top:2px solid var(--wb-steel);background:#f5f7f7;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.dio-where-bar .wb-head h3{max-width:none}
.dio-where-bar .wb-stage{--wb-low:186px;--wb-high:30px;position:relative;isolation:isolate;height:300px;overflow:hidden;background:linear-gradient(180deg,#f5f7f7 0%,#f5f7f7 80%,#edf1f2 100%)}
.dio-where-bar .wb-ground{position:absolute;left:4%;right:3%;bottom:17px;height:1px;background:#c5d1d7}
.dio-where-bar .wb-step{position:absolute;bottom:18px;width:44%;margin:0;border-top:1px solid rgba(255,255,255,.9);box-shadow:inset 0 -1px 0 rgba(32,56,70,.12)}
.dio-where-bar .wb-step::before{content:'';position:absolute;top:-13px;left:0;right:-12px;height:12px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.dio-where-bar .wb-step::after{content:'';position:absolute;right:-12px;top:-13px;bottom:0;width:12px;clip-path:polygon(0 12px,100% 0,100% calc(100% - 12px),0 100%)}
.dio-where-bar .wb-denture{left:6%;top:var(--wb-low);z-index:1;background:linear-gradient(110deg,#edf0f1 0%,#e0e7ea 100%)}
.dio-where-bar .wb-denture::before{background:linear-gradient(110deg,#fff,#e8eef0)}.dio-where-bar .wb-denture::after{background:#b8c8d0}
.dio-where-bar .wb-fixed{left:50%;top:var(--wb-high);z-index:2;background:linear-gradient(110deg,#cfdee5 0%,#b6cad5 100%)}
.dio-where-bar .wb-fixed::before{background:linear-gradient(110deg,#edf3f5,#d7e4e9)}.dio-where-bar .wb-fixed::after{background:linear-gradient(#9ab2c0,#8fa9b7)}
.dio-where-bar .wb-step-copy{position:relative;z-index:1;padding:20px 24px}
.dio-where-bar .wb-step h4{margin:0 0 7px;font-size:23px;font-weight:500;line-height:1.24;letter-spacing:-.02em}
.dio-where-bar .wb-step h4 span{display:block}
.dio-where-bar .wb-step p{margin:0;font-size:18px;font-weight:400;line-height:1.45;max-width:22ch;color:#334e5e}
.dio-where-bar .wb-threshold{position:absolute;left:4%;right:3%;top:calc(var(--wb-low) - 28px);height:32px;z-index:5}
.dio-where-bar .wb-limit-label{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 12px;white-space:nowrap;color:var(--wb-ink);font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.015em}
.dio-where-bar .wb-rail{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(180deg,#f4a165,#ed873c 52%,#e9853b);border:1px solid #684a35;box-shadow:0 2px 2px rgba(32,56,70,.08)}
.dio-where-bar .wb-rail::before,.dio-where-bar .wb-rail::after{content:'';position:absolute;top:-3px;bottom:-3px;width:3px;background:#203846}.dio-where-bar .wb-rail::before{left:-1px}.dio-where-bar .wb-rail::after{right:-1px}
.dio-where-bar .wb-opinion{display:grid;grid-template-columns:100px minmax(0,1fr);gap:22px;padding:24px 28px 26px;border-top:1px solid var(--wb-line);background:#fff}
.dio-where-bar .wb-opinion h4{margin:3px 0 0;font-size:16px;font-weight:500;line-height:1.4;color:var(--wb-steel)}
.dio-where-bar .wb-opinion-copy p{margin:0;font-size:17px;line-height:1.5;font-weight:400;color:var(--wb-body)}
.dio-where-bar .wb-opinion-copy p+p{margin-top:13px}.dio-where-bar .wb-opinion-copy .wb-lead{font-size:19px;line-height:1.45;font-weight:500;color:var(--wb-ink);letter-spacing:-.01em}
.dio-where-bar .wb-widget figcaption{margin:14px 6px 0;padding:0;font-size:14px;line-height:1.5;font-weight:400;color:#536b79;text-align:center}
.dio-where-bar .wb-demo[data-motion=active] .wb-rail{animation:wb-set-bar 1.2s cubic-bezier(.3,.7,.2,1) .45s 1 both;animation-play-state:paused}
.dio-where-bar .wb-demo[data-motion=active] .wb-limit-label{animation:wb-label .35s ease 1.65s 1 both;animation-play-state:paused}
@keyframes wb-set-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wb-label{from{opacity:0}to{opacity:1}}
.dio-where-bar .wb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container(max-width:520px){.dio-where-bar .wb-head{padding:20px 20px 18px}.dio-where-bar .wb-head h3{font-size:22px}.dio-where-bar .wb-stage{--wb-low:202px;height:336px}.dio-where-bar .wb-step-copy{padding:18px 18px}.dio-where-bar .wb-step h4{font-size:21px}.dio-where-bar .wb-step p{font-size:17px}.dio-where-bar .wb-opinion{grid-template-columns:1fr;gap:10px;padding:22px 22px 24px}.dio-where-bar .wb-opinion h4{margin:0;font-size:17px}.dio-where-bar .wb-opinion-copy .wb-lead{font-size:19px}.dio-where-bar .wb-limit-label{font-size:17px}}
@container(max-width:380px){.dio-where-bar .wb-head{padding:19px 18px 18px}.dio-where-bar .wb-head h3{font-size:21px}.dio-where-bar .wb-stage{--wb-low:196px;--wb-high:32px;height:350px}.dio-where-bar .wb-step-copy{padding:18px 13px}.dio-where-bar .wb-step h4{font-size:19px;line-height:1.25}.dio-where-bar .wb-step p{font-size:16px;line-height:1.45}.dio-where-bar .wb-limit-label{font-size:16px}.dio-where-bar .wb-opinion{padding:22px 18px 24px}.dio-where-bar .wb-opinion-copy .wb-lead{font-size:18px}.dio-where-bar .wb-opinion-copy p{font-size:17px}}
/* Site placement (2026-11-03): an answer column on a 320 px phone gives this component about 280 px, narrower than the producer's
   302 px check, and there "Treated as an upgrade" wraps under the orange bar. Below 301 px the lower step and the bar sit lower
   (at least 16 px clear of the upper copy, as at 302 px); the step proportions, words and bar are unchanged. */
@container(max-width:300px){.dio-where-bar .wb-stage{--wb-low:224px;height:380px}}
@container(max-width:279px){.dio-where-bar .wb-stage{--wb-low:244px;height:400px}}
@media(prefers-reduced-motion:reduce){.dio-where-bar .wb-rail,.dio-where-bar .wb-limit-label,.dio-where-bar .wb-field>i{animation:none!important}.dio-where-bar .wb-rail{transform:none!important}.dio-where-bar .wb-limit-label{opacity:1!important}.dio-where-bar .wb-field>i{background-position:0 0!important}}
:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-rail,:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-limit-label,:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-field>i{animation:none!important}
:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-rail{transform:none!important}
:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-limit-label{opacity:1!important}
:is(.reduce-motion,.dio-alive-off,[data-motion=off],[data-motion=reduced]) .dio-where-bar .wb-field>i{background-position:0 0!important}
@media(forced-colors:active){.dio-where-bar .wb-widget{--wb-ink:CanvasText;--wb-body:CanvasText;--wb-steel:CanvasText;--wb-line:CanvasText}.dio-where-bar :is(.wb-panel,.wb-head,.wb-stage,.wb-opinion,.wb-step){background:Canvas}.dio-where-bar .wb-field{display:none}.dio-where-bar .wb-step{outline:1px solid CanvasText}.dio-where-bar .wb-step::before,.dio-where-bar .wb-step::after{background:CanvasText}.dio-where-bar .wb-step p{color:CanvasText}.dio-where-bar .wb-rail{background:Highlight;border-color:CanvasText}.dio-where-bar .wb-limit-label{color:HighlightText}.dio-where-bar .wb-rail::before,.dio-where-bar .wb-rail::after{background:CanvasText}}
@media print{.dio-where-bar .wb-controls{display:none!important}.dio-where-bar .wb-rail,.dio-where-bar .wb-limit-label,.dio-where-bar .wb-field>i{animation:none!important}.dio-where-bar .wb-rail{transform:none!important}.dio-where-bar .wb-limit-label{opacity:1!important}.dio-where-bar .wb-field>i{background-position:0 0!important}.dio-where-bar .wb-panel{break-inside:avoid}}

/* Keep the longer label on one baseline; low step/rail sit 12px lower for clearance below the upper copy. */
.dio-where-bar .wb-denture .wb-step-copy{padding-bottom:12px}