/* ===========================================================================
   THE DEMO FRAME
   ---------------------------------------------------------------------------
   An iframe IS a viewport. The page inside sees the frame's CSS width, not the
   visitor's screen, so a 769px frame triggered the demo's tablet breakpoint no
   matter how large the monitor was. The frame is therefore laid out at a true
   device width and scaled to fit.

   It used to sit in a .7fr / 1.3fr column, which meant a 1440px layout squeezed
   into roughly 780px: everything rendered at about 54% and the demo was too
   small to read. It now runs the full width of the shell, so the same 1440px
   layout scales to around 86%, and there is a switch for looking at the phone
   layout instead.
   =========================================================================== */

.demo-full { padding-block: clamp(64px, 7vw, 104px); border-bottom: 1px solid var(--line); }

.demo-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 30px;
}
.demo-head-copy { max-width: 62ch; }
.demo-head-copy h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.demo-head-copy p { margin-top: 14px; font-size: 1.02rem; }
.demo-controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------------- the switch */
.view-switch {
  display: inline-flex; padding: 4px; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}
.view-switch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; color: var(--muted);
  font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  transition: background-color .3s ease, color .3s ease;
}
.view-switch button svg { width: 15px; height: 15px; }
.view-switch button:hover { color: var(--ink); }
.view-switch button[aria-pressed="true"] {
  background: var(--ink); color: #fff;
}
.view-switch button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* -------------------------------------------------------------- the stage */
/* Centring matters in mobile mode, where the frame is far narrower than the
   page. In desktop mode the frame fills the width and centring is a no-op. */
.demo-stage { display: flex; justify-content: center; }

.demo-frame-wrap {
  overflow: hidden; width: 100%;
  border: 1px solid #CFC6DB; border-radius: 22px; background: #fff;
  box-shadow: var(--shadow);
  transition: width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1);
}
.demo-frame-wrap iframe {
  width: 1440px; height: 900px; border: 0; display: block;
  transform-origin: 0 0;
  transform: scale(var(--demo-scale, .86));
}
/* The wrapper has to be exactly as tall as the SCALED frame. A transform does
   not change layout size, so without this the box keeps the full 900px and
   leaves a tall empty gap under the demo. */
.demo-frame-wrap { height: calc(900px * var(--demo-scale, .86) + 46px); }

/* The chrome above the frame was written for a 1240px-wide box. At 390px the
   address and the concept label both wrapped onto three lines and buried the
   demo. Nothing in the bar is allowed to wrap; the address truncates, and the
   label is dropped entirely in phone view where there is no room for it. */
.browser-bar { flex-wrap: nowrap; }
.browser-address {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.concept-label { white-space: nowrap; flex: none; }
[data-view-mode="mobile"] .concept-label { display: none; }
[data-view-mode="mobile"] .browser-bar { padding: 0 12px; gap: 6px; }

/* --------------------------------------------------------- mobile view */
/* 390px is the iPhone viewport the demo's own breakpoints are written against.
   Shown close to 1:1 rather than scaled to fill, because a phone layout blown
   up to 1200px wide is not what anyone's phone looks like. */
[data-view-mode="mobile"] .demo-frame-wrap {
  width: min(390px, 100%);
  height: calc(844px * var(--demo-scale-m, 1) + 46px);
  border-radius: 30px;
}
[data-view-mode="mobile"] .demo-frame-wrap iframe {
  width: 390px; height: 844px;
  transform: scale(var(--demo-scale-m, 1));
}

@media (max-width: 700px) {
  .demo-head { gap: 22px; }
  .demo-controls { width: 100%; justify-content: space-between; }
}

/* The scale is set from JS so the frame always fills its container exactly,
   whatever the width turns out to be. */