/* Vertical placement stays with each app so its mobile navigation remains accessible. */
/* Shared demonstration dock; colours belong to each fictional business. No business workflow changes. */
html[data-showcase="driftwood-holdings"]{--demo-bg:#1f3f26;--demo-fg:#f9f4eb;--demo-accent:#c9a55c;--demo-ink:#17261b}
html[data-showcase="harbourview"]{--demo-bg:#0a2a4e;--demo-fg:#ffffff;--demo-accent:#b9472d;--demo-ink:#ffffff}
html[data-showcase="broad-street-hair"]{--demo-bg:#141414;--demo-fg:#f2eee9;--demo-accent:#fb3c9a;--demo-ink:#141414}
html[data-showcase="cordova-bay-landscaping"]{--demo-bg:#241c15;--demo-fg:#f5f1e6;--demo-accent:#a9d15a;--demo-ink:#201a13}
html[data-showcase="rock-bay-auto-repair"]{--demo-bg:#7a1f2b;--demo-fg:#fbf8f2;--demo-accent:#f0b429;--demo-ink:#1d1b19}
html[data-showcase="home-repair-care-team"]{--demo-bg:#23404a;--demo-fg:#fbf8f0;--demo-accent:#f0b429;--demo-ink:#1e2a2d}
html[data-showcase="sonrika"]{--demo-bg:#141210;--demo-fg:#fbf8f1;--demo-accent:#e9a825;--demo-ink:#141210}
html[data-showcase="saxe-point-dog-daycare"]{--demo-bg:#5a2d4d;--demo-fg:#fdfaf4;--demo-accent:#d9b98c;--demo-ink:#24201d}
html[data-showcase="fernwood-home-cleaning"]{--demo-bg:#4a2b5f;--demo-fg:#ffffff;--demo-accent:#e7e1f0;--demo-ink:#35203f}
html[data-showcase] .proto{left:auto;right:12px;background:var(--demo-bg);color:var(--demo-fg);border:1px solid var(--demo-accent);box-shadow:0 5px 18px #0003;max-width:calc(100vw - 24px);gap:8px;flex-wrap:nowrap}
html[data-showcase] .proto button{background:var(--demo-accent);color:var(--demo-ink);font-weight:650;min-height:44px}
html[data-showcase] .proto button:focus-visible{outline:3px solid var(--demo-fg);outline-offset:3px}
html[data-showcase] .proto button:hover{filter:brightness(1.07)}
html[data-showcase] .tour{border-color:var(--demo-accent)}
@media(max-width:520px){html[data-showcase] .proto{right:8px;max-width:calc(100vw - 16px)}}

/* Consistent access to each app’s existing demo controls. */
[data-showcase] button[data-act="details"]{width:auto;min-width:44px;min-height:36px;white-space:nowrap;padding:6px 10px}
[data-showcase] .demo-settings-label{display:inline!important;font-size:12px;line-height:1.2}
@media(max-width:420px){[data-showcase] button[data-act="details"]{padding:6px;font-size:11px}}

@media(max-width:700px){[data-showcase] button[data-act="details"]{width:28px;min-width:28px;padding:0}[data-showcase] button[data-act="details"] .demo-settings-label{display:none!important}[data-showcase] button[data-act="details"]::before{content:"⚙";font-size:18px;line-height:1}}

/* Keep the fictional-status notice visible even when an app compacts its chrome. */
@media(max-width:700px){[data-showcase] .topchrome.tight .dl-s{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important;display:inline!important;font-size:11px!important}}

/* HarbourView uses a sticky customer/technician bar and a fixed owner bar. */
@media(max-width:860px){
 html[data-showcase="harbourview"] :is(body.inapp,body.ownerv) .proto{bottom:calc(88px + env(safe-area-inset-bottom))}
 html[data-showcase="harbourview"] :is(body.inapp,body.ownerv) .tour{bottom:calc(144px + env(safe-area-inset-bottom))}
}