/* present-window.css — the "Live demo" button on a project page and the
   pop-up it opens. Loaded by /projects only; it reads the tokens that page
   declares (--bg, --bg-2, --ink, --ink-2, --muted, --line, --line-2) and the
   families and accent from theme.css. Behaviour and the reasons for it are in
   present-window.js. */

/* ── the button ── */
.pw-launch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.pw-open{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 8px;
  border:0;border-radius:99px;cursor:pointer;
  background:var(--ink);color:var(--bg);
  font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(27,26,24,.7);
  transition:transform .2s,background .2s;
}
.pw-open:hover{transform:translateY(-1px);background:var(--accent)}
.pw-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pw-open-play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.pw-open:hover .pw-open-play{background:var(--bg);color:var(--accent)}
.pw-open-play svg{width:12px;height:12px;fill:currentColor;stroke:none;margin-left:2px}
.pw-chip{
  display:inline-flex;align-items:center;gap:7px;
  font:10.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.pw-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── the pop-up ── */
html.pwd-open{overflow:hidden}
dialog.pwd{
  position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);
  max-width:none;max-height:none;width:max-content;height:max-content;overflow:visible;
}
dialog.pwd::backdrop{background:rgba(16,15,13,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog.pwd[open]{animation:pwd-in .28s cubic-bezier(.2,.8,.25,1)}
dialog.pwd[open]::backdrop{animation:pwd-fade .28s ease}
@keyframes pwd-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pwd-fade{from{opacity:0}to{opacity:1}}
/* min-content: the window (or the phone) sets the width, the line above it wraps */
.pwd-box{
  width:min-content;max-width:calc(100vw - 16px);box-sizing:border-box;
  display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:22px;
  background:var(--bg);border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 4px 14px -6px rgba(0,0,0,.25);
}
.pwd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 2px 0 6px}
.pwd-id{display:flex;flex-direction:column;gap:6px;min-width:0}
.pwd-id strong{font:450 24px/1.05 var(--font-serif);letter-spacing:-.02em}
.pwd-dev{display:flex;align-items:center;gap:8px;font:11.5px/1.35 var(--font-mono);color:var(--ink-2)}
.pwd-dev svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pwd-x{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);transition:background .15s,transform .15s;
}
.pwd-x:hover{background:var(--ink);color:var(--bg)}
.pwd-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* the browser window: a laptop screen's 16:10, as large as the viewport allows */
.pw{
  margin:0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--bg-2);
  width:min(1200px,calc(100vw - 84px),calc((100dvh - 210px) * 1.6));
}
.pw-bar{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 8px 8px 14px;border-bottom:1px solid var(--line-2);background:var(--bg-2);
}
.pw-dots{display:flex;gap:6px;flex-shrink:0}
.pw-dots i{width:10px;height:10px;border-radius:50%;background:oklch(0.7 0.13 28)}
.pw-dots i:nth-child(2){background:oklch(0.82 0.12 80)}
.pw-dots i:nth-child(3){background:oklch(0.74 0.12 145)}
.pw-tabs{display:flex;gap:3px;flex-shrink:0}
.pw-tab{
  font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);
  transition:color .15s,background .15s,border-color .15s;
}
.pw-tab:hover{color:var(--ink)}
.pw-tab[aria-pressed="true"]{background:var(--bg);border-color:var(--line-2);color:var(--ink)}
.pw-url{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;
  border-radius:99px;border:1px solid var(--line);background:var(--bg);
  font:12px/1 var(--font-mono);color:var(--ink-2);text-decoration:none;
}
.pw-url span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pw-url:hover{border-color:var(--line-2);color:var(--ink)}
.pw-url svg{width:12px;height:12px;flex-shrink:0;opacity:.6}
.pw-tools{display:flex;gap:2px;flex-shrink:0}
.pw-tools button,.pw-tools a{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;cursor:pointer;
  border:0;background:none;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s;
}
.pw-tools button:hover,.pw-tools a:hover{background:var(--bg);color:var(--ink)}
.pw svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-tools svg{width:16px;height:16px}

.pw-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
/* a site that only ever opens in its own window has nothing to fill a 16:10
   screen with — the cover alone, at the height it needs */
.pw[data-embed="no"] .pw-screen{aspect-ratio:auto;height:clamp(280px,46vh,420px)}
.pw-stage{position:absolute;inset:0}
.pw-stage iframe{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:0 0;transition:opacity .25s}

/* the phone: no window around it, only a slim toolbar above, and the iPhone
   drawn at its real 390 × 844 and scaled to the height there is. The pop-up
   is as wide as the phone (or a little wider, for the line above it), so the
   one-line description wraps instead of stretching the pop-up sideways. */
.pwd{--pw-phone-h:min(868px,calc(100dvh - 230px))}
.pwd[data-viewport="mobile"] .pwd-box{width:max(400px,calc(var(--pw-phone-h) * 414 / 868 + 36px));box-sizing:border-box}
.pw[data-viewport="mobile"]{
  width:auto;border:0;border-radius:0;background:transparent;overflow:visible;
}
.pw[data-viewport="mobile"] .pw-bar{padding:0 0 12px;border:0;background:transparent}
.pw[data-viewport="mobile"] .pw-dots,.pw[data-viewport="mobile"] [data-pw-act="full"]{display:none}
.pw[data-viewport="mobile"] .pw-screen{
  height:var(--pw-phone-h);width:100%;aspect-ratio:auto;background:transparent;overflow:visible;
}
.pw-phone{
  position:absolute;top:0;left:0;width:414px;height:868px;transform-origin:0 0;
  padding:var(--pw-bezel,12px);border-radius:64px;background:#121212;
  box-shadow:inset 0 0 0 2px #3a3a3a,inset 0 0 0 5px #0a0a0a,0 0 0 1px #000,0 40px 70px -30px rgba(0,0,0,.65);
}
.pw-phone iframe{
  position:absolute;left:var(--pw-bezel,12px);top:calc(var(--pw-bezel,12px) + var(--pw-status,47px));
  width:390px;height:calc(844px - var(--pw-status,47px));border-radius:0 0 50px 50px;
}
.pw-status{
  position:absolute;left:var(--pw-bezel,12px);top:var(--pw-bezel,12px);width:390px;height:var(--pw-status,47px);
  display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 46px;box-sizing:border-box;
  border-radius:52px 52px 0 0;background:#fff;color:#111;font:600 16px/1 -apple-system,"SF Pro Text",system-ui,sans-serif;
}
.pw-status span{display:flex;align-items:center;gap:6px}
.pw-status svg{height:12px;width:auto;fill:currentColor;stroke:none}
.pw-island{
  position:absolute;top:calc(var(--pw-bezel,12px) + 11px);left:50%;width:124px;height:36px;margin-left:-62px;
  border-radius:20px;background:#000;z-index:2;pointer-events:none;
}
.pw-home{
  position:absolute;bottom:calc(var(--pw-bezel,12px) + 8px);left:50%;width:136px;height:5px;margin-left:-68px;
  border-radius:3px;background:rgba(0,0,0,.82);z-index:2;pointer-events:none;
}

/* until the site has painted, a quiet word instead of a white rectangle */
.pw.is-loading .pw-screen::after{
  content:attr(data-loading);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;z-index:3;
}
.pw.is-loading .pw-stage iframe{opacity:0}

.pw-cover{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;text-decoration:none;color:var(--ink);cursor:pointer;
  background:
    radial-gradient(70% 60% at 50% 42%,oklch(var(--accent-lch,0.62 0.16 38) / .10),transparent 70%),
    var(--bg);
}
.pw-logo{max-width:170px;max-height:44px;width:auto;height:auto;margin-bottom:6px;opacity:.92}
.pw-play{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 12px 28px -12px oklch(var(--accent-lch,0.62 0.16 38) / .9);
  transition:transform .2s;
}
.pw-play svg{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px}
.pw-cover:hover .pw-play{transform:scale(1.07)}
.pw-t{font:500 15px/1.3 var(--font-body)}
.pw-h{font:11px/1 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.pw-n{max-width:46ch;margin-top:4px;font:12.5px/1.5 var(--font-body);color:var(--ink-2)}
.pw.is-live .pw-cover{display:none}

/* full screen: the native one, or the pinned stand-in where there is none */
.pw.is-full,.pw.pw-max{
  display:flex;flex-direction:column;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;
}
.pw.pw-max{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100dvh}
.pw.is-full .pw-screen,.pw.pw-max .pw-screen{flex:1;aspect-ratio:auto;height:auto}

@media (max-width:620px){
  .pwd-box{padding:12px;gap:10px;border-radius:18px}
  .pwd-id strong{font-size:20px}
  .pwd-dev{font-size:10.5px}
  .pw{width:calc(100vw - 50px)}
  .pw-bar{gap:7px;padding:7px 6px 7px 10px}
  .pw-dots{display:none}
  .pw-url{height:28px;padding:0 10px;font-size:11px}
  .pw-tools button,.pw-tools a{width:30px;height:30px}
  .pw-screen{aspect-ratio:auto;height:calc(100dvh - 190px)}
  .pwd{--pw-phone-h:min(868px,calc(100dvh - 200px))}
  .pwd[data-viewport="mobile"] .pwd-box{width:calc(100vw - 32px)}
  .pw-n{font-size:12px}
}
/* a phone on its side: a column of title on the left and the device beside
   it, so the screen gets the whole height instead of what a header leaves */
@media (orientation:landscape) and (max-height:520px){
  .pwd{--pw-phone-h:calc(100dvh - 76px)}
  .pwd-box,.pwd[data-viewport="mobile"] .pwd-box{
    flex-direction:row;align-items:flex-start;width:auto;padding:12px;gap:16px;border-radius:18px;
  }
  .pwd-head{flex-direction:column-reverse;align-items:flex-start;gap:12px;width:200px;flex-shrink:0;padding:2px 0 0 4px}
  .pwd-id strong{font-size:20px}
  .pwd-dev{font-size:10.5px;align-items:flex-start}
  .pw{width:calc(100vw - 16px - 24px - 216px - 16px)}
  .pw-dots{display:none}
  .pw-bar{padding:6px 6px 6px 10px}
  .pw-screen,.pw[data-embed="no"] .pw-screen{aspect-ratio:auto;height:calc(100dvh - 76px)}
  /* the phone is narrow on its side: the address bar takes its width, or a
     little more, and the phone sits centred under it */
  .pw[data-viewport="mobile"]{width:max(250px,calc(var(--pw-phone-h) * 414 / 868))}
  .pw[data-viewport="mobile"] .pw-screen{height:var(--pw-phone-h);width:100%}
}
@media (max-width:420px){
  .pw-tab{padding:6px 7px;font-size:9px}
  .pw-tools [data-pw-act="reload"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  dialog.pwd[open],dialog.pwd[open]::backdrop{animation:none}
  .pw-open,.pw-play,.pw-stage iframe,.pw-tab{transition:none}
}