/* ============================================================
   Shell — on iPhone the app IS the page (full screen).
   On desktop the app sits in a phone bezel on the SMWD-style
   paper grid, so it still presents itself nicely.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- desktop framing ---------- */
.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.shell__tag { font-size: var(--text-sm); color: var(--ink-soft); }
.shell__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1;
}

/* Desktop: a portrait tablet in a bezel. The app never grows past
   --app-max-w, so the layout only ever has two states to design for. */
.phone {
  /* always the full tablet width on desktop — a short window just gets a
     shorter app, never a narrower one, so desktop always shows the same
     tablet tier an iPad user sees */
  width: min(var(--app-max-w), 100%);
  background: var(--ink);
  border-radius: var(--bezel-r);
  padding: var(--bezel-pad);
  box-shadow: 0 30px 60px rgba(23, 28, 24, 0.35);
}
.phone__screen {
  position: relative;
  background: var(--app-bg);
  border-radius: var(--screen-r);
  overflow: hidden;
  height: min(var(--app-vh), var(--app-max-h));
  /* the tier switch reads THIS width — see the tablet tier in tokens.css */
  container-type: inline-size;
  container-name: app;
}

/* ---------- phone + tablet: the app IS the page ----------
   Any touch device, and any window narrower than the desktop frame,
   gets the app edge to edge — capped at the 820px ceiling so an iPad
   in landscape centres it instead of stretching to 1180px wide. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body { background: var(--app-bg); }
  .shell { padding: 0; gap: 0; }
  .shell__tag, .shell__title { display: none; }
  .phone {
    width: min(100%, var(--app-max-w));   /* hard ceiling */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--app-bg);
  }
  .phone__screen {
    border-radius: 0;
    height: 100dvh;
  }
}