/* ============================================================
   LAB — the live sample console on /work (flag: ?sandbox)
   A browser-chrome window holding the sandbox in a same-origin
   iframe on desktop; a tap-to-launch card on phones.
   Achromatic, tech-frame vocabulary, same tokens as site.css.
   ============================================================ */

.sbx-live .sbx-live__intro{max-width:720px;margin-bottom:clamp(22px,3vw,34px)}
.sbx-live .sbx-live__intro h2{font-size:clamp(28px,4.4vw,48px);max-width:18ch;text-wrap:balance}
.sbx-live .sbx-live__intro p{margin-top:16px;color:var(--silver);font-size:clamp(15px,1.65vw,18px);line-height:1.6;max-width:58ch}
.sbx-live__tag{white-space:nowrap}
.sbx-skip{display:inline-block;margin:0 0 12px;color:var(--steel);transition:color var(--dur-fast) var(--ease-tech)}
.sbx-skip:hover,.sbx-skip:focus-visible{color:var(--white)}

/* ---- the window (desktop + tablet) ---- */
.sbx-window{
  position:relative;
  border:1px solid var(--edge);
  background:var(--panel);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02);
}
.sbx-window__bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  height:44px;
  padding:0 14px;
  border-bottom:1px solid var(--edge);
  background:#111;
}
.sbx-window__dots{display:flex;gap:7px}
.sbx-window__dots i{display:block;width:10px;height:10px;border-radius:50%;border:1px solid #3a3a3a;background:#1f1f1f}
.sbx-window__url{
  justify-self:center;
  display:inline-flex;align-items:center;gap:8px;
  min-width:0;max-width:420px;width:100%;
  height:28px;padding:0 14px;border-radius:6px;
  background:#000;border:1px solid var(--edge);
  font-family:var(--font-body);font-size:12.5px;letter-spacing:.01em;color:var(--silver);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sbx-window__url svg{flex:0 0 auto;width:11px;height:11px;color:var(--steel)}
.sbx-window__url b{font-weight:500;color:var(--white)}
.sbx-window__full{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  color:var(--steel);transition:color var(--dur-fast) var(--ease-tech);white-space:nowrap;
}
.sbx-window__full:hover,.sbx-window__full:focus-visible{color:var(--white)}
.sbx-window__stage{position:relative;height:clamp(560px,76vh,780px);background:#F4F4F4}
.sbx-window__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#F4F4F4}
.sbx-window__wait{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6a6a6a;
  background:
    linear-gradient(#000,#000) top / 100% 60px no-repeat,
    linear-gradient(#fff,#fff) 0 60px / 232px 100% no-repeat,
    #F4F4F4;
  transition:opacity var(--dur-slow) var(--ease-tech);
  pointer-events:none;
}
.sbx-window.is-ready .sbx-window__wait{opacity:0}

/* ---- the launch card (phones) ---- */
.sbx-launch{display:none}
.sbx-live__outro{margin-top:clamp(18px,2.4vw,26px)}

@media (max-width:767px){
  .sbx-window,.sbx-skip{display:none}
  .sbx-live__tag{display:none}
  .sbx-launch{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px 18px 20px;
    color:var(--white);
  }
  .sbx-launch__phone{
    display:block;position:relative;
    border:1px solid var(--edge);border-radius:14px;overflow:hidden;
    background:#000;padding:5px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  }
  .sbx-launch__phone img{display:block;width:100%;height:auto;border-radius:9px}
  .sbx-launch__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
  .sbx-launch__title{font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1.12;letter-spacing:-.01em}
  .sbx-launch__text{color:var(--silver);font-size:14px;line-height:1.55}
  .sbx-launch .btn{margin-top:6px;padding:14px 18px;min-height:48px}
  .sbx-launch:hover .btn{background:var(--black);color:var(--white)}
  .sbx-launch:focus-visible{outline:1px solid var(--silver);outline-offset:4px}
}
@media (max-width:359px){
  .sbx-launch{grid-template-columns:minmax(0,1fr)}
  .sbx-launch__phone{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sbx-window__wait,.sbx-window__full,.sbx-skip{transition:none}
}

/* ---- click-to-run (home variant B, ?simple&hometop) ----
   The stage shows a still of the console until the first click; the
   iframe only gets a src then, so the home page never loads the console
   for a visitor who scrolls past. */
.sbx-window__still{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:left top;display:block;
  transition:opacity var(--dur-slow) var(--ease-tech);
}
.sbx-window__start{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);
  transition:opacity var(--dur-slow) var(--ease-tech), background var(--dur-base) var(--ease-tech);
}
.sbx-window__start:hover{background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.62) 100%)}
.sbx-window__start .btn{pointer-events:none;box-shadow:0 18px 50px -12px rgba(0,0,0,.8)}
.sbx-window__start:focus-visible{outline:2px solid var(--white);outline-offset:-6px}
.sbx-window[data-sandbox-embed="click"] .sbx-window__wait{opacity:0}
.sbx-window[data-sandbox-embed="click"].is-loading .sbx-window__start{opacity:0;pointer-events:none}
.sbx-window[data-sandbox-embed="click"].is-loading .sbx-window__wait{opacity:1}
.sbx-window[data-sandbox-embed="click"].is-ready .sbx-window__still,
.sbx-window[data-sandbox-embed="click"].is-ready .sbx-window__wait{opacity:0}
.sbx-window[data-sandbox-embed="click"].is-ready .sbx-window__start{visibility:hidden}
/* review 2026-09-28: the faded still sat on top of the live iframe and ate every click */
.sbx-window[data-sandbox-embed="click"].is-loading .sbx-window__still{pointer-events:none}
.sbx-window[data-sandbox-embed="click"].is-ready .sbx-window__still{visibility:hidden;transition:opacity var(--dur-slow) var(--ease-tech),visibility 0s linear var(--dur-slow)}
.sbx-window[data-sandbox-embed="click"] .sbx-window__stage{height:clamp(480px,64vh,700px)}
@media (prefers-reduced-motion:reduce){
  .sbx-window__still,.sbx-window__start{transition:none}
}