/* wf-preview: the website preview window, lifted from the AI LAB case pages (noveq/css/cases.css)
   and made shareable. Set --wfp-font / --wfp-accent per world on :root or body. */
/* ========================================================================
   WEBSITE PREVIEW: the "view website" window opened from the metadata row.
   Built by the last module in js/cases.js, only when somebody opens it. A calm
   white window over a plain scrim; a compact bar with the product name and the
   real host, the primary "back to the case", a real new-tab link and a close
   button; under it the live site in a frame that scrolls on its own, or the
   labelled screenshot when the site refuses framing or does not answer.
   On a phone the window is the screen: identity at the top, the three actions
   in a bar at the bottom where a thumb is, both padded by the safe areas.
   ======================================================================== */
.wfp{position:fixed;inset:0;z-index:9700;font-family:var(--wfp-font,inherit);
  --pv-ink:#0A0A0A;--pv-body:#4F4F4F;--pv-mute:#6E6E6E;--pv-hair:#E3E3E3;--pv-soft:#F0F0F0;--pv-soft-h:#E3E3E3;
  --pv-accent:var(--wfp-accent,#246BFF);--pv-accent-h:#1a5fd0;--pv-ease:cubic-bezier(.2,.7,.2,1)}
.wfp[hidden]{display:none!important}
html.wfp-lock{overscroll-behavior:none}
.wfp-scrim{position:absolute;inset:0;background:rgba(10,10,10,.58);opacity:0;transition:opacity .25s var(--pv-ease)}
.wfp.is-open .wfp-scrim{opacity:1}
.wfp.is-closing .wfp-scrim{opacity:0;transition-duration:.16s}
.wfp-win{position:absolute;inset:24px;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.06);opacity:0;transform:translateY(12px) scale(.985)}
.wfp.is-open .wfp-win{animation:wfpIn .25s var(--pv-ease) forwards}
.wfp.is-closing .wfp-win{animation:wfpOut .16s ease-in forwards}
@keyframes wfpIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes wfpOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.99)}}
/* focus guards: real tab stops, invisible, never display:none */
.wfp-guard{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}

/* the bar */
.wfp-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 12px 0 20px;
  border-bottom:1px solid var(--pv-hair);background:#fff}
.wfp-id{display:flex;align-items:baseline;gap:10px;min-width:0}
.wfp-id b{font-family:var(--wfp-font,inherit);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--pv-ink);white-space:nowrap}
.wfp-host{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--pv-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wfp-acts{display:flex;align-items:center;gap:8px;flex:none}
.wfp-back,.wfp-tab,.wfp-x{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;
  border:0;border-radius:999px;font-family:var(--wfp-font,inherit);font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;
  transition:background-color .2s var(--pv-ease),color .2s var(--pv-ease)}
.wfp-back{padding:0 18px 0 14px;background:var(--pv-accent);color:#fff}
.wfp-back:hover{background:var(--pv-accent-h)}
.wfp-tab{padding:0 16px;background:var(--pv-soft);color:var(--pv-ink)}
.wfp-tab:hover{background:var(--pv-soft-h)}
.wfp-x{width:40px;padding:0;background:var(--pv-soft);color:var(--pv-ink)}
.wfp-x:hover{background:var(--pv-soft-h)}
.wfp-bar svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the site's focus layer paints a light-blue outline and an 8px radius on every button; these
   controls sit on white, so the ring is the accent with a white gap and keeps the capsule */
.wfp .wfp-back:focus-visible,.wfp .wfp-tab:focus-visible,.wfp .wfp-x:focus-visible,.wfp .wfp-go:focus-visible{
  outline:none;border-radius:999px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pv-accent)}
.wfp .wfp-frame:focus,.wfp .wfp-frame:focus-visible{outline:3px solid var(--pv-accent);outline-offset:-3px}

/* the stage: the frame scrolls its own document; the stage only scrolls for the fallback */
.wfp-stage{position:relative;flex:1;min-height:0;background:var(--pv-soft);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wfp-frame{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;background:transparent}
/* the loader sits UNDER the frame: a document paints over it the moment it renders, so the
   visitor sees the site as soon as there is one and the label only while there is not */
.wfp-load{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--pv-body)}
.wfp-load i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(36,107,255,.18);border-top-color:var(--pv-accent);animation:wfpSpin .9s linear infinite}
@keyframes wfpSpin{to{transform:rotate(360deg)}}
.wfp-fb{min-height:100%;padding:24px;display:flex;flex-direction:column;gap:16px}
.wfp-fb-msg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 22px;border-radius:16px;background:#fff}
.wfp-fb-msg p{margin:0;font-family:var(--wfp-font,inherit);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--pv-ink);max-width:640px}
.wfp-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--pv-accent);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--pv-ease)}
.wfp-go svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wfp-go:hover{background:var(--pv-accent-h)}
.wfp-shot{margin:0;padding:6px;border-radius:16px;background:#fff}
.wfp-shot img{display:block;width:100%;height:auto;border-radius:11px;background:var(--pv-soft)}
.wfp-shot figcaption{padding:12px 10px 6px;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--pv-mute)}
@media (max-width:768px){
  .wfp-win{inset:0;border-radius:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:none}
  .wfp-bar{display:contents}
  .wfp-id{grid-row:1;display:flex;align-items:baseline;gap:8px;min-height:52px;background:#fff;border-bottom:1px solid var(--pv-hair);
    padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 12px calc(16px + env(safe-area-inset-left,0px))}
  .wfp-stage{grid-row:2}
  .wfp-acts{grid-row:3;display:flex;align-items:center;gap:8px;background:#fff;border-top:1px solid var(--pv-hair);
    padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
  .wfp-back{flex:1;min-width:0;height:48px;justify-content:center;padding:0 14px}
  .wfp-tab{flex:none;width:48px;height:48px;padding:0}
  .wfp-tab span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .wfp-x{flex:none;width:48px;height:48px}
  .wfp-acts svg{width:16px;height:16px}
  .wfp-fb{padding:12px;gap:12px}
  .wfp-fb-msg{padding:16px;border-radius:14px}
  .wfp-fb-msg p{font-size:15px}
  .wfp-go{width:100%;justify-content:center}
  .wfp-shot{border-radius:14px}
}@media (prefers-reduced-motion:reduce){
  .wfp-scrim{transition:none}
  .wfp.is-open .wfp-scrim{opacity:1}
  .wfp-win{opacity:1;transform:none}
  .wfp.is-open .wfp-win,.wfp.is-closing .wfp-win{animation:none}
  .wfp-load i{animation:none}
  .wfp-back,.wfp-tab,.wfp-x,.wfp-go{transition:none}
}