/*
 * Demo-only presentation. The real gallery shell, hero, toolbar, filter dialog,
 * proofing selection controls and responsive layout are owned by:
 *   assets/css/client-gallery.css
 *   assets/css/gallery-unified.css
 *   app/public-gallery-ui.php (also used by demo-delivery.php, which runs client-gallery.js)
 *   assets/js/gallery-ui.js
 * Do not recreate the real toolbar here. Update BOTH demo-selection.php and
 * the real client-gallery.php together if their visual contracts change.
 * See scripts/demo-gallery-parity-qa.js.
 */
/* The demo's note sits in a dashed white box, like the demo galleries', so it's clear it isn't part of a real gallery. */
.demo-gallery-note{display:flex;align-items:center;gap:10px 18px;margin:0 0 15px;padding:14px 18px;border:1.5px dashed rgba(22,36,31,.28);border-radius:16px;background:#fff;color:#29443c}
.demo-gallery-note strong{flex:0 0 auto;color:var(--brand-dark)}
.demo-process-link{display:inline-flex;align-items:center;gap:7px;margin-top:8px;color:inherit;font-weight:800}
.demo-process-link::after{content:'→'}
.demo-proof-card{position:relative;cursor:pointer}
.demo-proof-card img{display:block;width:100%;height:100%;object-fit:cover}
.demo-proof-card .media-overlay{z-index:3}
.demo-state-note{margin:4px 0 0;color:var(--theme-muted);font-size:.86rem}
.demo-delivery-loading main,.demo-delivery-loading .gallery-hero,.demo-delivery-loading .event-signoff,.demo-delivery-loading .service-invite{visibility:hidden}
.demo-noscript{position:fixed;z-index:100;inset:auto 20px 20px}
@media(max-width:720px){.demo-gallery-note{display:grid;padding:13px}}