/* ════════ the "site below" — browser frame, wireframe & pour ════════ */

/* ── the frame around the preview ──
   Each theme picks its own presentation via a `chrome` class set from the
   THEMES registry; the cards and drop zone above are what stay constant. */
.site-frame {
  width: min(1120px, 96vw);
  border: 3px solid var(--st-line);
  border-radius: 8px;
  background: var(--st-panel-2);
  overflow: hidden;
  box-shadow: var(--frame-shadow);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
body.theme-coffee .site-frame {
  border-radius: 18px 14px 16px 12px / 12px 18px 12px 18px;
}

.frame-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--st-panel);
  border-bottom: 2px solid var(--st-line);
  transition: background 0.5s ease, border-color 0.5s ease;
}
/* full-bleed themes drop the chrome entirely */
.site-frame.chrome-none .frame-top { display: none; }

.fnav {
  display: flex;
  gap: 2px;
  font-size: 17px;
  line-height: 1;
  color: var(--st-muted);
}
.fnav i { font-style: normal; padding: 0 3px; }

.furl {
  font-family: var(--st-body-font);
  font-size: 13px;
  color: var(--st-ink);
  background: var(--st-panel-2);
  border: 1.5px solid var(--st-line);
  border-radius: 5px;
  padding: 5px 14px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.5s ease;
}

/* window controls, right-hand side — no platform's traffic lights */
.fctrls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.fctrls i {
  position: relative;
  width: 26px;
  height: 20px;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.fctrls i::before,
.fctrls i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--st-ink);
  transform: translate(-50%, -50%);
}
/* these must out-specify `.fctrls i::before` above */
.fctrls i.fmin::before { width: 9px; height: 1.5px; }
.fctrls i.fmax::before {
  width: 8px;
  height: 8px;
  background: none;
  border: 1.5px solid var(--st-ink);
  border-radius: 1px;
}
.fctrls i.fmax::after { display: none; }
.fctrls i.fmin::after { display: none; }
.fctrls i.fcls::before,
.fctrls i.fcls::after { width: 11px; height: 1.5px; }
.fctrls i.fcls::before { transform: translate(-50%, -50%) rotate(45deg); }
.fctrls i.fcls::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* coffee keeps its hand-drawn frame, with neutral marks */
body.theme-coffee .frame-top { border-bottom-width: 2.5px; }
body.theme-coffee .furl {
  font-size: 15px;
  color: var(--coffee);
  background: var(--cream);
  border-radius: 999px;
  border-width: 2px;
}
body.theme-coffee .fctrls i { border-radius: 46% 54% 52% 48%; }

/* the CRT frames itself as a terminal window instead of a browser */
.site-frame.chrome-terminal .frame-top { padding: 7px 10px 7px 14px; }
.site-frame.chrome-terminal .fnav { display: none; }
.site-frame.chrome-terminal .furl {
  border: 0;
  background: none;
  text-align: center;
  letter-spacing: 1px;
  padding: 5px 0;
}

.site-canvas {
  position: relative;
  min-height: 560px;
  height: calc(100vh - 470px);
  max-height: 760px;
  overflow: hidden;
  background: var(--canvas-bg);
  transition: background 0.5s ease;
}

/* themed sites are real pages: they scroll inside the frame, while the
   arrival overlays stay pinned to the canvas viewport */
.theme-site {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--st-line) transparent;
}
.theme-site::-webkit-scrollbar { width: 10px; }
.theme-site::-webkit-scrollbar-track { background: transparent; }
.theme-site::-webkit-scrollbar-thumb {
  background: var(--st-line);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ── wireframe placeholder site ── */
.wireframe {
  position: absolute;
  inset: 0;
  padding: 26px 34px;
  color: var(--wf-dash);
  overflow: hidden;
}
.wireframe > * { pointer-events: none; }
.wf-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2.5px dashed var(--wf-dash);
}
.wf-logo { width: 30px; height: 30px; border: 2.5px dashed var(--wf-dash); border-radius: 50%; }
.wf-line { height: 10px; background: var(--wf-block); border-radius: 6px; }
.wf-btn { width: 84px; height: 28px; border: 2.5px dashed var(--wf-dash); border-radius: 8px; margin-left: auto; }

.wf-hero { display: flex; gap: 34px; padding: 30px 4px 24px; }
.wf-copy { flex: 1.15; display: flex; flex-direction: column; gap: 12px; }
.wf-h1 { height: 26px; width: 82%; background: var(--wf-block); border-radius: 8px; }
.wf-h1.short { width: 58%; }
.wf-p { height: 11px; width: 92%; background: var(--wf-block-soft); border-radius: 6px; }
.wf-p.short { width: 55%; }
.wf-cta { width: 130px; height: 36px; border: 2.5px dashed var(--wf-dash); border-radius: 10px; margin-top: 8px; }
.wf-img {
  flex: 1;
  min-height: 150px;
  border: 2.5px dashed var(--wf-dash);
  border-radius: 10px;
  color: var(--wf-dash);
  display: flex;
}
.wf-img svg { width: 100%; height: 100%; }

.wf-cards { display: flex; gap: 20px; padding: 4px; }
.wf-card {
  flex: 1;
  border: 2.5px dashed var(--wf-dash);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wf-thumb { height: 54px; background: var(--wf-block-soft); border-radius: 8px; margin-bottom: 4px; }
.wf-footer { height: 16px; margin: 26px 4px 0; background: var(--wf-block-soft); border-radius: 6px; }

/* ── pour curtain ── */
.pour-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateY(-102%);
  pointer-events: none;
}
.pour-overlay .wave { flex: 0 0 60px; width: 100%; }
.pour-overlay .wave path { fill: var(--coffee-dark); }
.pour-overlay .wave.top path { fill: var(--coffee-dark); }
.pour-overlay .pour-body {
  flex: 1;
  margin: -1px 0;
  background: linear-gradient(180deg, var(--coffee-dark) 0%, var(--coffee) 55%, #7e5a40 100%);
}
.pour-overlay .wave.bottom path { fill: #7e5a40; }

/* the falling stream from the mug */
.pour-stream {
  position: fixed;
  z-index: 440;
  width: 11px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #5a4030, var(--coffee-dark));
  transform-origin: top center;
  pointer-events: none;
}
.pour-splash {
  position: fixed;
  z-index: 441;
  width: 46px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #7e5a40, var(--coffee-dark) 80%);
  opacity: 0.9;
  pointer-events: none;
  animation: splash-wob 0.4s ease-in-out infinite alternate;
}
@keyframes splash-wob { to { transform: scaleX(1.25) scaleY(0.8); } }