/* The live demo: one staged scene — a TV on the shop wall, the front-desk
   monitor, the bay tablet — each showing the real product. */

html, body { height: 100%; }
body {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #07090d;
  overflow-x: hidden;
}

/* ---- top bar ---------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.title { display: grid; }
.product { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; }
.sub { font-size: 0.8rem; color: var(--text-dim); }
.steps {
  flex: 1;
  display: flex;
  gap: 0.6rem 1.4rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.steps li { display: flex; gap: 0.5rem; align-items: baseline; min-width: 14rem; flex: 1; }
.steps li > span { flex: 1; }
.steps b {
  flex: none; display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--st-assigned); color: #08111f; font-size: 0.8rem;
}
.steps i { color: var(--text); font-style: normal; font-weight: 600; }
.actions { display: flex; gap: 0.6rem; }

button, .primary, .ghost {
  font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 8px; padding: 0.45rem 0.9rem; text-decoration: none;
}
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.ghost:hover { border-color: var(--text-dim); }
.primary { background: var(--st-assigned); color: #08111f; border: 1px solid var(--st-assigned); }

/* ---- scene -------------------------------------------------------------------- */

.scene {
  display: grid;
  gap: 1.2rem 1.4rem;
  padding: 1.2rem 1.4rem;
  /* The device in use gets the room; the other two are live previews. */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 23vw, 440px);
  grid-template-areas: "main side1" "main side2";
  align-items: start;
}
.scene[data-focus="desk"]   .desk,
.scene[data-focus="tv"]     .tv,
.scene[data-focus="tablet"] .tablet { grid-area: main; justify-self: center; width: 100%; }
.scene[data-focus="desk"]   .tv,
.scene[data-focus="tablet"] .tv,
.scene[data-focus="tv"]     .desk   { grid-area: side1; }
.scene[data-focus="desk"]   .tablet,
.scene[data-focus="tv"]     .tablet,
.scene[data-focus="tablet"] .desk   { grid-area: side2; }

/* Full screen: only the device in use; the others keep running, hidden. */
.scene[data-full] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.scene[data-full] .device:not([data-focused]) { display: none; }
#exit-full { display: none; }
body[data-full] #exit-full { display: inline-block; }
body[data-full] .steps { display: none; }

.device { position: relative; min-width: 0; }
.device[data-focused] .enlarge:not(.full) { display: none; }
.scene[data-full] .enlarge.full { display: none; }
.caption-actions { flex: none; display: flex; gap: 0.4rem; }
/* Previews are narrow: title on one line, buttons under it. */
.device:not([data-focused]) .caption { flex-wrap: wrap; }
.device:not([data-focused]) .caption > span:not(.caption-actions) { flex-basis: 100%; }
.scene[data-full] .monitor-stand { display: none; }

/* A preview's screen is covered by one big button: click it to use that device. */
.cover {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #fff; cursor: zoom-in;
}
.cover span {
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: rgba(8, 12, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem; opacity: 0; transition: opacity 0.15s;
}
.cover:hover span, .cover:focus-visible span { opacity: 1; }
.device[data-focused] .cover { display: none; }
.steps li[data-focus-target] { cursor: pointer; }
.steps li[data-focus-target]:hover { color: var(--text); }

.screen { position: relative; overflow: hidden; background: #000; box-sizing: content-box; }
.screen iframe {
  position: absolute; top: 0; left: 0;
  border: 0; transform-origin: 0 0;
  background: var(--bg);
}

.caption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  margin-top: 0.7rem; font-size: 0.85rem; color: var(--text-dim);
}
.caption b { color: var(--text); }
.caption > span { flex: 1; }
.enlarge { flex: none; padding: 0.25rem 0.6rem; font-size: 0.78rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.enlarge:hover { border-color: var(--text-dim); }

/* The shop wall: poured concrete with form-tie marks, lit from above. */
.tv {
  padding: 2.2rem 2.6rem 1rem;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(circle at 12% 22%, rgba(0, 0, 0, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 22%, rgba(0, 0, 0, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 12% 78%, rgba(0, 0, 0, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 78%, rgba(0, 0, 0, 0.35) 0 3px, transparent 4px),
    linear-gradient(180deg, #4a4d52, #3a3c40 55%, #2e3033);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}
.tv .caption { color: #c9ccd2; }
.tv-body { position: relative; }
.tv-body .screen {
  border: clamp(6px, 0.9vw, 12px) solid #0b0b0c;
  border-bottom-width: clamp(8px, 1.1vw, 16px);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px #222;
}
/* Wall mount shadow behind the set. */
.tv-mount {
  position: absolute; left: 30%; right: 30%; top: 30%; bottom: 30%;
  z-index: -1; box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.55);
}

/* Front-desk monitor on a stand. */
.monitor .screen {
  border: clamp(6px, 0.8vw, 12px) solid #1a1c20;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #2c2f36, 0 20px 40px rgba(0, 0, 0, 0.5);
}
.monitor-stand {
  width: 18%; height: 34px; margin: 0 auto;
  background: linear-gradient(90deg, #15171b, #262a31 50%, #15171b);
  clip-path: polygon(38% 0, 62% 0, 70% 70%, 100% 72%, 100% 100%, 0 100%, 0 72%, 30% 70%);
}

/* iPad, landscape, with its camera. */
.ipad {
  position: relative;
  padding: clamp(10px, 1.4vw, 20px);
  border-radius: clamp(18px, 2vw, 30px);
  background: #121316;
  box-shadow: 0 0 0 2px #2c2e33, 0 20px 40px rgba(0, 0, 0, 0.55);
}
.ipad::before {
  content: ''; position: absolute; left: calc(clamp(10px, 1.4vw, 20px) / 2 - 3px); top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #2a2c31;
}
.ipad .screen { border-radius: 8px; }

/* ---- start overlay -------------------------------------------------------------- */

.start {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(3px);
}
.start[hidden] { display: none; }
.start-card {
  max-width: 30rem; margin: 1rem; padding: 2rem;
  text-align: center; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.start-title { margin: 0 0 0.6rem; font-size: 1.5rem; font-weight: 800; }
.big { margin-top: 1rem; padding: 0.8rem 1.6rem; font-size: 1.05rem; }

/* ---- narrow screens: stack the devices, full width ------------------------------ */

@media (max-width: 1100px) {
  /* The device in use full width; the two previews side by side below it. */
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main main" "side1 side2"; padding: 1rem; }
  .tv { padding: 1rem 1rem 0.6rem; }
  .device:not([data-focused]) .caption { font-size: 0.75rem; }
  .device:not([data-focused]) .caption > span:not(.caption-actions) { display: none; }
  .cover span { opacity: 1; }
}