/* stage bar uses the SIDEBAR surface (--sbbg / --sbbd) so the shell reads as one frame.
   v2-dockbar.css — stage bar = full-width bottom bar, frozen to the viewport bottom (Oct 2026). Loaded last so it wins over v2-fit.css. */
:root{--dock-margin:0px;--dock-h:84px;--dock-gap:18px}
body[data-screen="work"] .dock,body[data-screen="cat"] .dock{left:var(--sbw);right:0;bottom:0;height:var(--dock-h);background:var(--sbbg);backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);border-top:1px solid var(--sbbd);padding:0 clamp(20px,2.4vw,40px);justify-content:flex-start}
body[data-screen="work"] .dock .jrail,body[data-screen="cat"] .dock .jrail{width:auto!important;flex:1 1 auto;max-width:none!important;height:100%;padding:0;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;justify-content:space-between}
body[data-screen="work"] .dock:has(.otto:not([hidden])) .jrail{margin-right:72px}
html.homeOn .dock{background:none;border:0}
/* blend the sidebar ↔ stage-bar corner: the sidebar's vertical hairline stops where the bar begins, and the bar's top hairline fades in from the sidebar edge — no visible cross */
body[data-screen="work"] aside,body[data-screen="cat"] aside{border-right:1px solid transparent;border-image:linear-gradient(to bottom,var(--sbbd) 0,var(--sbbd) calc(100% - var(--dock-h) - 40px),transparent calc(100% - var(--dock-h))) 1}
body[data-screen="work"] .dock,body[data-screen="cat"] .dock{border-top:1px solid transparent;border-image:linear-gradient(to right,transparent 0,var(--sbbd) 80px) 1;margin-left:-1px}
/* backdrop scrolls with the page (v2-bgscroll.js sets --bgY/--bgH) */
body::before{inset:0 0 auto 0!important;height:var(--bgH,100%)!important;transform:translate3d(0,calc(-1 * var(--bgY,0px)),0);will-change:transform}
/* stage chips: more breathing room inside the outline */
body .dock .jrail .jch{padding:8px 18px 8px 8px!important;gap:12px!important;border-radius:8px!important}
body .dock .jrail .jch.jcat{padding:8px 18px!important}

/* demo banner: bottom-left toast above the stage bar, clear of page headings (Oct 2026) */
.demoBn{top:auto!important;bottom:calc(var(--dock-h) + 18px);left:calc(var(--sbw) + 32px);transform:translateY(8px);opacity:0;transition:opacity .25s,transform .25s}.demoBn.show{opacity:1;transform:none}
@media (max-width:760px){.demoBn{left:calc(var(--sbw) + 12px);right:12px}}

/* cast confirm: no grey bar, centred, 1.5x button */
.mCard.cast:not(.wdStep) .castFoot.dock{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;justify-content:center!important}
.mCard.cast:not(.wdStep) .castFoot.dock::before,.mCard.cast:not(.wdStep) .castFoot.dock::after{display:none!important}
.mCard.cast:not(.wdStep) .castFoot.dock #castDone{margin:0 auto!important;padding:16px 40px!important;font-size:19px!important;min-height:0!important;border-radius:8px}

/* cast step — same visual system as the wardrobe step ("What are they wearing?") */
.mCard.cast:not(.wdStep){max-width:1420px;width:min(1420px,calc(100vw - 64px));padding:40px 32px 28px}
.castK{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
.mCard.cast:not(.wdStep) .castK{margin-top:4px}.mCard.cast.wdStep .castK{display:none}
.mCard.cast:not(.wdStep) .mT{font-size:clamp(32px,3vw,44px)!important;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}
.mCard.cast:not(.wdStep) .mS{font-size:clamp(16px,1.3vw,20px);color:var(--ts);margin:6px 0 0;max-width:none}
.mCard.cast:not(.wdStep) .castTop{margin:26px 0 22px;gap:10px 28px}
.mCard.cast:not(.wdStep) .fgrp{border:0;padding:0;gap:10px}.mCard.cast:not(.wdStep) .fgrp>svg{display:none}
.mCard.cast:not(.wdStep) .castTop .lbl{font-size:13px;letter-spacing:.1em;font-weight:500;margin-right:2px}
.mCard.cast:not(.wdStep) .seg{display:flex;gap:8px;background:none;border:0;padding:0}
.mCard.cast:not(.wdStep) .seg button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(245,244,240,.16);background:none;color:var(--tp);font:500 14px Inter,sans-serif;letter-spacing:0;text-transform:capitalize}
.mCard.cast:not(.wdStep) .seg button:hover{border-color:rgba(245,244,240,.4)}
.mCard.cast:not(.wdStep) .seg button.on{border-color:var(--gold);color:var(--gold);background:none;font-weight:600}
.mCard.cast:not(.wdStep) .castGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.mCard.cast:not(.wdStep) .mdC{border-radius:8px;background:#1d1b18;border:1px solid rgba(245,244,240,.12)}
.mCard.cast:not(.wdStep) .mdC:hover{border-color:rgba(245,244,240,.32)}
.mCard.cast:not(.wdStep) .mdC.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 22px rgba(229,168,46,.18)}
.mCard.cast:not(.wdStep) .mdC .ph2{aspect-ratio:3/4;background:#24221e}.mCard.cast:not(.wdStep) .mdC .ph2 img{object-position:50% 15%}
.mCard.cast:not(.wdStep) .mdC .bd3{padding:14px 16px 18px}
.mCard.cast:not(.wdStep) .mdC .nm4{font-size:17px;font-weight:600}
.mCard.cast:not(.wdStep) .mdC .mt2{font-size:14px;letter-spacing:0;text-transform:none;margin-top:6px;line-height:1.45;white-space:normal}
.mCard.cast:not(.wdStep) .mdC .selTick2{top:12px;right:12px;width:28px;height:28px;border-radius:50%}
@media (max-width:1200px){.mCard.cast:not(.wdStep) .castGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.mCard.cast:not(.wdStep) .castGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cast filters v2: Show / Build pills + Age slider (18–80) */
.mCard.cast:not(.wdStep) .castTop{display:grid;grid-template-columns:auto auto minmax(280px,1fr);align-items:start;gap:0;margin:28px 0 24px;padding:20px 0;border-top:1px solid rgba(245,244,240,.1);border-bottom:1px solid rgba(245,244,240,.1)}
.ctG{display:flex;flex-direction:column;gap:12px;padding:0 32px;border-left:1px solid rgba(245,244,240,.1)}.ctG:first-child{padding-left:0;border-left:0}
.ctL{display:flex;align-items:baseline;gap:8px;font-size:13px;letter-spacing:.1em;color:var(--ts)}
.ctL b{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--gold);font-variant-numeric:tabular-nums;margin-left:6px}.ctL i{font-style:normal;letter-spacing:0;font-size:13px}
.ctRange{position:relative;padding:4px 0 24px}
#castAge{--p:16%;-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(245,244,240,.14) var(--p));outline:none;cursor:pointer;margin:14px 0 0}
#castAge::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#F5F4F0;border:4px solid var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 6px rgba(229,168,46,.14);cursor:grab}
#castAge::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#F5F4F0;border:4px solid var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.45);cursor:grab}
#castAge:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #1b1a18,0 0 0 5px var(--gold)}
.ctTicks{position:absolute;left:12px;right:12px;bottom:0;height:16px}.ctTicks span{position:absolute;transform:translateX(-50%);font-size:12px;color:var(--ts);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.mCard.cast:not(.wdStep) .castTop{grid-template-columns:1fr;gap:20px}.ctG{padding:0;border-left:0}}

/* demo notice docked in the product nav row (between Back and Continue) */
.pfNav{display:flex;align-items:center;gap:16px}
.pfDemoSlot{flex:1;min-width:0;display:flex;justify-content:center}
.pfDemoSlot .demoBn{position:static!important;transform:none!important;left:auto!important;top:auto!important;bottom:auto!important;max-width:100%;box-shadow:none}
.pfDemoSlot .demoBn .tx{overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.pfDemoSlot .demoBn .tx{display:none}}
html body .pfDemoSlot .demoBn,html body .pfDemoSlot .demoBn.show{transform:none!important;position:static!important;left:auto!important;top:auto!important;bottom:auto!important;right:auto!important;margin:0!important}

/* top utilities: stronger glass behind the menu so items read over any background */
[data-theme="dark"]{--utscrim:linear-gradient(90deg,rgba(24,23,21,.35) 0%,rgba(24,23,21,.86) 22%,rgba(24,23,21,.92) 100%)}
:root:not([data-theme="dark"]){--utscrim:linear-gradient(90deg,rgba(250,250,248,.35) 0%,rgba(250,250,248,.88) 22%,rgba(250,250,248,.94) 100%)}
html body .utils::before{backdrop-filter:blur(22px) saturate(1.2)!important;-webkit-backdrop-filter:blur(22px) saturate(1.2)!important;-webkit-mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important;mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important}
html body .utils .u{opacity:1}
/* top bar glass: ends just under the menu text with a short soft fade (no long tail) */
html body .utils::before{bottom:-10px!important;background:linear-gradient(180deg,var(--utTint) 0%,var(--utTint) 70%,transparent 100%)!important;-webkit-mask:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%)!important;mask:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%)!important;border:0!important}
[data-theme="dark"]{--utTint:rgba(22,21,19,.42);--utTint2:rgba(22,21,19,.18)}
:root:not([data-theme="dark"]){--utTint:rgba(250,250,248,.5);--utTint2:rgba(250,250,248,.22)}

/* FR safeguards — French runs ~20% longer: tighter tracking on dense labels, ellipsis instead of overflow */
html[lang="fr"] .dock .dkL,html[lang="fr"] .dock .step span{letter-spacing:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html[lang="fr"] .pfNav{column-gap:16px}
html[lang="fr"] .pfNav .pfDemoSlot{min-width:0}html[lang="fr"] .pfNav .pfDemoSlot .demoBn{white-space:normal;text-wrap:balance;text-align:center}
html[lang="fr"] .wdT b,html[lang="fr"] .wdT span{overflow-wrap:anywhere;hyphens:auto}
html[lang="fr"] .castTop .seg button{padding-left:12px;padding-right:12px}
html[lang="fr"] .ctL{letter-spacing:.06em}
html[lang="fr"] body{hyphens:manual}