/* The free demo's own styles, loaded only by the demo build (tools/demo.sh), after strand.css.
   Embedded (?embed, inside an effect page): the photo alone over the page's slate, with demo.js's control bar below. */
html.embed, html.embed body { height: 100%; }
html.embed body { background: transparent; }   /* the page around the frame shows through */
/* #app in the selector: the editor's own layouts include :has(> #photoStrip…), which an id makes very specific */
html.embed #app.app.focus-full, html.embed #app.app.focus-full:has(> #photoStrip[hidden]) {
  grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important;
  grid-template-areas: "view" "bar" !important; gap: 0 !important; padding: 0 !important; height: 100%;
}
html.embed #app.app.focus-full > .viewport { grid-area: view; background: transparent; box-shadow: none; height: auto !important; align-self: stretch; }   /* not the narrow-screen 62vh: the frame is often narrow */
/* nothing else of the editor takes a row: the photo gets all the height above the bar, and sits centred in it */
html.embed #app.app.focus-full > :not(.viewport):not(.embed-bar) { display: none !important; }
html.embed #app.app.focus-full > .embed-bar { display: flex; grid-area: bar; }
html.embed .tour-card, html.embed .hints { display: none !important; }

.embed-bar {
  grid-area: bar; display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  padding: 10px 14px 14px; font: 400 14px var(--font-sans); color: var(--teal);
}
.embed-btn {
  height: 40px; padding: 0 16px; border: 1px solid rgba(185, 229, 236, 0.55); background: transparent; color: var(--lit);
  font: inherit; cursor: pointer; transition: background 0.15s, box-shadow 0.2s;
}
.embed-btn:hover, .embed-btn[aria-pressed=true] { background: var(--bar); box-shadow: var(--bar-glow); }
.embed-btn:focus-visible, .embed-buy:focus-visible, .embed-amt input:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }
.embed-save { background: linear-gradient(180deg, rgba(58, 150, 240, 0.7), rgba(16, 96, 196, 0.6)); border-color: rgba(150, 210, 255, 0.6); }
.embed-amt { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px; }
.embed-amt input { width: 140px; accent-color: #3a96f0; }
.embed-buy { margin-left: 6px; color: var(--lit); text-underline-offset: 4px; }

/* preview-only looks: a small lock on their tiles, and a banner over the photo while one is on it */
#lookStrip .row-item.demo-pv { position: relative; }
#lookStrip .demo-lock { position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; z-index: 3; pointer-events: none; background: rgba(228, 248, 251, 0.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.demo-preview { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 14px; background: rgba(17, 22, 26, 0.86); box-shadow: inset 0 0 0 1px rgba(185, 229, 236, 0.35), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  color: var(--lit, #e4f8fb); font-size: 13px; white-space: nowrap; }
.demo-preview b { font-weight: 500; color: #fff; }
.demo-preview a { padding: 6px 12px; background: #fff; color: #1d5fb8; text-decoration: none; }
.demo-preview[hidden] { display: none; }