/* The V29 engineering presentation keeps category controls off the models. */
.hotspot{width:25px;height:25px;font-size:18px;box-shadow:0 0 0 4px #007bff26}
.hotspot-detached::before{content:"";position:absolute;left:50%;top:50%;height:1px;width:var(--leader-length);background:#d2e8f5b8;transform:rotate(var(--leader-angle));transform-origin:left center;pointer-events:none;z-index:-1}
.hotspot-detached::after{content:"";position:absolute;left:calc(50% + var(--leader-x));top:calc(50% + var(--leader-y));width:4px;height:4px;transform:translate(-50%,-50%);border:1px solid #e4f5ff;background:#176aad;border-radius:50%;pointer-events:none}
.hotspot-detached[data-category=pumps] span,.hotspot-detached[data-category=robots] span{bottom:auto;top:calc(100% + 8px)}

/* The fixed header must never cover the keyboard skip link. */
.skip-link{z-index:30}
#retry-motion{border:1px solid #8bc5ff;border-radius:4px;padding:8px 12px;font-size:11px;min-height:36px;pointer-events:auto}
#retry-motion[hidden]{display:none}
.pool-story [data-jump]:disabled,.pool-story #scrub:disabled{cursor:progress;opacity:.45}
.pool-stage[data-load-error] .chapters,.pool-stage[data-load-error] .scrub-label,.pool-stage[data-load-error] .scroll-hint,.pool-stage[data-load-error] #play-motion,.pool-stage[data-load-error] .intro-secondary{display:none}
.pool-stage[data-load-error] #load-status{display:inline;margin-left:0}
.pool-stage[data-load-error] .story-meta{flex-wrap:wrap;gap:10px}
@media(max-width:420px){.pool-story[aria-busy=true] #load-status{display:inline}.pool-story[aria-busy=true] .scroll-hint{display:none}}

/* Two readable chapter rows instead of five tiny columns on phones. The later
   V29 rules also override the inherited short-viewport and max-420px rules. */
@media(max-width:700px){
 .site-footer{flex-wrap:wrap;gap:16px}
 .site-footer nav{flex-basis:100%;min-width:0;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
 .chapters{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 8px}
 .chapters button{grid-column:span 2;min-height:44px;padding:7px 0 5px;font-size:11px;line-height:1.25}
 .chapters button:nth-child(n+4){grid-column:span 3}
 .chapters button span{display:block;font-size:9px;line-height:1;margin:0 0 4px}
}
@media(max-width:340px){.chapters button{font-size:10px}}
@media(max-width:700px) and (max-height:680px){.chapters button{min-height:40px;padding-top:6px;padding-bottom:4px}}
@media(max-width:700px),(max-height:500px) and (min-aspect-ratio:7/5){
 .hotspot[data-category=finishes] span{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
}

/* Short landscape screens need a clear area for both the scene and controls. */
@media(max-height:500px) and (min-aspect-ratio:7/5){
 .scene-fit{width:min(64%,calc((100svh - 165px)*16/9));left:auto;right:3%;top:calc(62px + (100svh - 165px)/2)}
 .intro-copy,.chapter-copy{top:77px;left:4%;right:auto;max-width:32%;width:32%}
 .intro-copy h1{font-size:clamp(22px,3.1vw,28px);line-height:1.06;margin-top:8px;letter-spacing:-.6px}
 .intro-copy p{font-size:10px;margin-top:10px}
 .intro-actions{gap:6px;margin-top:12px}
 .intro-cta,.intro-secondary{min-height:30px;padding:0 8px;font-size:9px;gap:6px}
 .chapter-copy h2{font-size:22px;line-height:1.1}
 .chapter-copy p{font-size:10px;line-height:1.5}
 .chapter-copy .eyebrow,.intro-copy .eyebrow{font-size:8px}
 .chapters{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
 .chapters button,.chapters button:nth-child(n+4){grid-column:auto;min-height:38px;font-size:10px;padding:5px 0 3px}
 .chapters button span{display:inline;font-size:8px;margin-right:5px}
 .story-bottom{bottom:0;padding-bottom:10px}
 .story-meta{margin-bottom:5px;min-height:22px}
 .hotspot span,.hotspot-contextual span{font-size:9px}
}

/* Preserve the short-screen layout when a later visual theme changes type
   sizes or the phone scene position. The 667x375 view must keep both hero
   actions above the chapter controls. These rules only affect the story. */
@media(max-height:500px) and (min-aspect-ratio:7/5){
 .pool-story .scene-fit{top:calc(62px + (100svh - 165px)/2)}
 .pool-story .intro-copy,.pool-story .chapter-copy{top:70px}
 .pool-story .intro-copy h1{font-size:clamp(22px,3.1vw,28px);line-height:1.02;margin-top:8px}
 .pool-story .intro-copy p{font-size:10px;line-height:1.4;margin-top:8px}
 .pool-story .intro-actions{gap:6px;margin-top:8px}
 .pool-story .intro-cta,.pool-story .intro-secondary{min-height:30px;padding:0 8px;font-size:9px;gap:6px}
 .pool-story .intro-copy .eyebrow,.pool-story .chapter-copy .eyebrow{font-size:8px}
 .pool-story .chapter-copy h2{font-size:22px;line-height:1.1}
 .pool-story .chapter-copy p{font-size:10px;line-height:1.5}
 .pool-story .hotspot span{font-size:9px}
}