/* Compact operational views: fixed controls, distinct feedback, restrained motion. */
.demo-scene{border:1px solid #bdd2ee26;border-radius:13px;margin:0 0 18px;overflow:hidden;background:radial-gradient(ellipse at 80% 0,#28394c48,transparent 70%),#0c1321;flex-shrink:0}
.scene-heading{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid #bdd2ee16;font:.59rem var(--mono);color:var(--muted);letter-spacing:.035em}
.scene-live-dot{width:5px;height:5px;border-radius:50%;background:var(--emerald);box-shadow:0 0 9px #20b88870;flex-shrink:0}.scene-state{margin-inline-start:auto;color:var(--polaris);font: .66rem var(--sans);max-width:45%;text-align:end}
.scene-body{padding:17px;min-width:0}.scene-pair{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:9px 0;font:.75rem var(--sans);color:var(--muted);border-bottom:1px solid #bdd2ee0e}.scene-pair strong{font-weight:500;color:var(--ice);text-align:end;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.scene-pair:last-child{border:0}.scene-day,.scene-channel{display:block;font:500 .83rem var(--sans);margin-bottom:18px;color:var(--ice)}
.scene-choice{border:1px solid #bdd2ee28;background:#bdd2ee06;color:var(--ice);border-radius:7px;padding:10px 12px;font:.72rem var(--sans);cursor:pointer;transition:background .25s,border-color .25s,color .25s;min-width:0;line-height:1.4}.scene-choice:hover,.scene-choice:focus-visible{border-color:var(--polaris);background:#f3c96912;outline-offset:3px}.scene-choice[aria-pressed=true]{color:var(--polaris);border-color:#f3c96980;background:#f3c96912}.scene-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.scene-shortcuts .scene-choice{flex:1 1 100px;text-align:start;font-size:.66rem}
.scene-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.scene-route-step{border:1px solid #bdd2ee20;border-radius:9px;padding:15px 10px;position:relative;font:.72rem var(--sans);line-height:1.5}.scene-route-step b{display:block;color:var(--polaris);font:.56rem var(--mono);margin-bottom:10px}.scene-route-step:not(:last-child):after{content:'›';position:absolute;right:-8px;top:45%;color:var(--polaris);z-index:1}
/* `contain:inline-size` is load-bearing, not tidying: `overflow-x` alone did NOT hold the
   wider diary. The inline preview hangs off `.pv-figure`, a grid item at `min-width:auto`,
   so the row's min-content (426px at 8 slots) propagated straight up and blew a 330px
   track out to 490 — the page scrolled sideways on a phone. Containment says the box's
   inline size owes nothing to its contents, which is the claim we actually need here.
   The narrow breakpoint below then WRAPS rather than leaning on this to scroll: a diary
   that scrolls sideways inside a page let a re-render nudge the page itself ~40px on a
   phone (test_inline_actions_update_in_place_without_scrolling_the_page), and eight
   times behind a 44px window was a poor way to show a day regardless. */
.scene-calendar{overflow-x:auto;overscroll-behavior-x:contain;contain:inline-size}.scene-calendar-row{display:grid;grid-template-columns:60px repeat(var(--slots,4),minmax(52px,1fr));gap:7px;margin:8px 0;align-items:center}.scene-calendar-row>strong{font:500 .71rem var(--sans)}.scene-calendar-row .scene-choice{padding:12px 3px;font-size:.65rem}.scene-choice[data-available=false]{color:#7d869b;background:repeating-linear-gradient(135deg,transparent,transparent 6px,#8d96ae0a 6px,#8d96ae0a 7px);border-style:dashed}.scene-choice[data-available=false][aria-pressed=true]{color:#e7b991;border-color:#e7b99199}.scene-bookings[data-conflict=true]{border-color:#e7b99150}
.scene-floor{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:13px;padding:25px 20px;border:1px dashed #bdd2ee35;border-radius:11px;background:linear-gradient(100deg,#0b1328,#111c2a);position:relative}.scene-floor i{height:23px;width:16px;justify-self:center;border-radius:8px 8px 5px 5px;background:#263249;box-shadow:inset 0 1px #bdd2ee22;transition:background .5s,box-shadow .5s,opacity .5s}.scene-floor i.occupied{background:#77bda8;box-shadow:0 0 15px #73c8ac40}.scene-floor i.outside{opacity:.2}.scene-cameras[data-alert=true] .scene-floor{border-color:#dfb584aa}.scene-cameras[data-alert=true] .scene-floor i.occupied{background:#d8b57a}
.scene-roster-axis{display:flex;justify-content:space-between;padding-inline-start:60px;color:var(--muted);font:.56rem var(--mono);margin-bottom:15px}.scene-roster-row{display:grid;grid-template-columns:60px 1fr;align-items:center;margin-bottom:15px;gap:6px}.scene-roster-row>strong{font:.72rem var(--sans)}.scene-roster-track{height:31px;background:repeating-linear-gradient(90deg,#bdd2ee04,#bdd2ee04 calc(10% - 1px),#bdd2ee15 10%);border-radius:5px;overflow:hidden}.scene-shift{height:100%;background:linear-gradient(90deg,#547e8980,#648b9480);border-radius:5px;position:relative;transition:width .55s,margin-inline-start .55s}.scene-roster-row.selected .scene-shift{background:linear-gradient(90deg,#a98537,#e0bd66);box-shadow:0 0 18px #f3c96920}.scene-break{position:absolute;left:48%;top:0;height:100%;width:8%;background:repeating-linear-gradient(135deg,#182030aa,#182030aa 3px,#18203044 3px,#18203044 6px);transition:opacity .35s}
.scene-commerce .scene-body{background:linear-gradient(135deg,#e8e3cf08,transparent)}.scene-commerce .scene-receipt-total{border-top:1px dashed #bdd2ee50;margin-top:6px;padding-top:16px}.scene-receipt-total strong{font-size:1.45rem;color:var(--polaris)}.scene-commerce[data-paid=true] .scene-state{color:#81d8b5}
.scene-flow-step{display:flex;align-items:center;gap:15px;min-height:42px;padding:10px 12px;margin:0 0 11px;border:1px solid #bdd2ee24;border-radius:8px;position:relative;font:.73rem var(--sans);background:#bdd2ee04}.scene-flow-step b{font:.56rem var(--mono);color:var(--polaris);font-weight:400}.scene-flow-step:not(:nth-child(5)):after{content:'';width:1px;height:12px;background:#f3c96970;position:absolute;top:100%;left:21px}.scene-journeys[data-eligible=false] .scene-flow-step:nth-child(n+4){opacity:.35}.scene-journeys[data-eligible=false] .scene-flow-step:nth-child(3){border-color:#dfb58470}
.scene-site-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.scene-site-slots .scene-choice{flex:1 1 64px;padding-inline:5px;text-align:center}.demo-website[data-layout=compact]{text-align:start;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center}.demo-website[data-layout=compact] .website-brand{grid-column:1/-1}.demo-website[data-layout=compact] .website-star{grid-row:2/4;margin:10px 0}.demo-website[data-layout=compact] h3{font-size:1.4rem;max-width:100%;margin:14px 0}.demo-website[data-layout=compact] .pill{width:max-content}
.scene-trend{display:block;width:100%;height:120px;margin:15px 0;color:var(--polaris);background:repeating-linear-gradient(0deg,transparent,transparent 29px,#bdd2ee0c 30px)}.scene-note{font:.63rem var(--sans);line-height:1.5;color:var(--muted);margin:12px 0 0}.demo-bar-track{position:relative}.demo-bar-previous{position:absolute;bottom:0;width:72%;max-width:78px;left:50%;transform:translateX(-50%);background:#a3b5d229;border:1px solid #a3b5d23d;border-radius:4px 4px 0 0;transition:height .65s,opacity .35s}.demo-bar-fill{z-index:1}.demo-chart .demo-bar-fill{width:42%}.demo-controls{gap:10px}.demo-controls label{flex-basis:120px}.demo-controls .demo-run{flex-basis:100%;margin-top:3px}
@media(max-width:760px){.scene-body{padding:14px}.scene-heading{padding:11px 13px;font-size:.52rem}.scene-state{font-size:.58rem}.scene-calendar-row{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}.scene-calendar-row>strong{grid-column:1/-1;margin-top:5px}.scene-calendar-row .scene-choice{font-size:.57rem;padding:11px 1px}.scene-calendar-row>strong{font-size:.63rem}.scene-floor{gap:10px;padding:23px 12px}.scene-floor i{width:13px;height:20px}.scene-route-step{font-size:.64rem;padding:11px 8px}.scene-pair{font-size:.68rem}.scene-flow-step{font-size:.68rem}.scene-roster-row{grid-template-columns:48px 1fr}.scene-roster-axis{padding-inline-start:48px}.scene-choice{font-size:.65rem}.scene-shortcuts .scene-choice{font-size:.61rem}}
@media(prefers-reduced-motion:reduce){.scene-choice,.scene-floor i,.scene-shift,.scene-break,.demo-bar-previous{transition:none}}
/* Ads, invoicing, consents and compliance samples (2026-09-28). */
.scene-consents[data-outcome=allowed] .scene-flow-step:nth-child(5){border-color:#81d8b560}
.scene-consents[data-outcome=warned] .scene-flow-step:nth-child(5){border-color:#dfb58480;color:#dfb584}
.scene-consents[data-outcome=blocked] .scene-flow-step:nth-child(5){border-color:#e7b99199;color:#e7b991}
.scene-consents[data-outcome=blocked] .scene-state{color:#e7b991}
.scene-consents[data-required=false] .scene-flow-step:nth-child(3),.scene-consents[data-required=false] .scene-flow-step:nth-child(4){opacity:.35}
.scene-invoicing .scene-body{background:linear-gradient(135deg,#e8e3cf08,transparent)}
.scene-invoicing .scene-receipt-total{border-top:1px dashed #bdd2ee50;margin-top:6px;padding-top:16px}
.scene-invoicing[data-issued=true] .scene-state{color:#81d8b5}
.scene-qr-row{display:flex;align-items:center;gap:14px;margin-top:16px;font:.66rem var(--sans);color:var(--muted);line-height:1.5}
.scene-qr{display:grid;grid-template-columns:repeat(7,6px);grid-auto-rows:6px;gap:1px;padding:6px;background:#e8eef7;border-radius:4px;flex-shrink:0;transition:opacity .4s}
.scene-qr i.on{background:#0c1321}
.scene-invoicing[data-issued=false] .scene-qr{opacity:.25}
.scene-meter{height:10px;border-radius:6px;background:#bdd2ee14;overflow:hidden;margin:2px 0 14px}
.scene-meter span{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#547e89,#77bda8);transition:width .6s,background .4s}
.scene-compliance[data-state=expiring] .scene-meter span{background:linear-gradient(90deg,#8a7a4a,#d8b57a)}
.scene-compliance[data-state=expired] .scene-meter span{background:linear-gradient(90deg,#9a5a3a,#e7b991)}
@media(prefers-reduced-motion:reduce){.scene-meter span,.scene-qr{transition:none}}