/* ============================================================
   PROTOTYPE SHELL

   The frame, not the thing framed. It exists so a visitor can
   see both layouts without opening developer tools, and so the
   phone view is the real layout at 402 points rather than a
   scaled screenshot.

   Every value is a token from tokens.css, the product's own
   sheet. A frame around a design system, built in values the
   system does not have, would be the first thing to contradict.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-variation-settings: var(--axis-blunt);
}

/* ── the bar ─────────────────────────────────────────────── */
.shell-bar {
  flex: none;
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-10) var(--gutter);
  background: var(--surface-header);
  color: var(--text-on-brand);
}

.shell-title {
  flex: 1; min-width: 0; margin: 0;
  color: var(--text-on-brand);
  font: var(--font-weight-524) var(--text-size-14)/var(--text-line-20) var(--font-family);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shell-back, .shell-open {
  flex: none;
  color: var(--text-on-brand); text-decoration: none;
  opacity: 0.78;
  font: var(--font-weight-524) var(--text-size-12)/var(--text-line-16) var(--font-family);
  padding: var(--space-8) 0;
}
.shell-back:hover, .shell-open:hover { opacity: 1; text-decoration: underline; }

/* the ring inverts on the brand surface, as it does in the product */
.shell-bar :focus-visible {
  outline: var(--stroke-focus) solid var(--focus-ring-on-brand);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.shell-toggle {
  flex: none;
  display: flex; padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text-on-brand) 14%, transparent);
}
.shell-toggle button {
  min-height: var(--touch-min);
  padding: 0 var(--space-14);
  border: 0; border-radius: var(--radius-md);
  background: none; color: var(--text-on-brand);
  font: var(--font-weight-524) var(--text-size-12)/var(--text-line-16) var(--font-family);
  cursor: pointer;
  opacity: 0.72;
  transition: background var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}
.shell-toggle button:hover { opacity: 1; }
/* fill AND full opacity, so the selected state does not rest on colour alone */
.shell-toggle button[aria-pressed="true"] {
  background: var(--text-on-brand);
  color: var(--action-primary);
  opacity: 1;
}

/* ── the stage ───────────────────────────────────────────── */
.stage {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: var(--space-24) var(--gutter);
}
.device { width: 100%; height: 100%; }
iframe {
  display: block; width: 100%; height: 100%;
  border: 0;
  background: var(--surface-page);
}

/* Phone: the real 402pt viewport, with a border so it reads as a device
   rather than as a narrow page. Height is capped so it never outgrows the
   window and starts a second scrollbar inside the first. */
.stage.is-phone .device {
  width: 402px;
  height: min(874px, 100%);
  border: var(--stroke-thick) solid var(--border-interactive);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--elevation-overlay);
}

.shell-note {
  flex: none; margin: 0;
  padding: 0 var(--gutter) var(--space-16);
  text-align: center;
  color: var(--text-muted);
  font: var(--font-weight-420) var(--text-size-12)/var(--text-line-16) var(--font-family);
}

/* ── already on a phone ──────────────────────────────────── */
/* The toggle has nothing to offer here: this IS the phone view, and a 402pt
   frame inside a 390pt window is a joke at the visitor's expense. */
@media (max-width: 700px) {
  .shell-toggle, .shell-note { display: none; }
  .shell-title { font-size: var(--text-size-12); }
  .stage { padding: 0; }
  .stage.is-phone .device,
  .device { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
}