/* The document layer (architecture.md 7.4): the font face, the inherited
   properties on html and body, and the rules by which the document reacts to a
   document fact (7.5). Nothing else crosses a shadow boundary. */

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/static/vendor/inter/InterVariable.woff2") format("woff2");
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* A page is a stack of component tags (section 8) and nothing else, so the
   document lays them out: a column exactly one viewport tall. A view that fills
   or is capped by the remaining height (note-editor's height modes) then has a
   definite height to work against, so a page whose views fit never scrolls; a
   stack that is taller overflows and the window scrolls as before. Block
   children stretch and stack exactly as they did in normal flow. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-canvas);
  font-optical-sizing: auto;
}

/* Section 7.5: the document reacts to the viewport fact. Drawn only where a
   pointer can use the switch; a phone never previews a phone. The device must
   stay put while the page scrolls inside the screen, so html clips: an overflow
   set on a body in normal flow is otherwise propagated to the window, which
   scrolls the whole page and lets the phone scroll away. The device chrome, the
   titanium frame and the Dynamic Island, is preview-only physical detail, not
   part of the app's design vocabulary, so its greys and dimensions are literals
   here rather than tokens (7.4). The frame is a box-shadow so the screen stays
   exactly one phone wide. */
@media (pointer: fine) {
  html[data-viewport="phone"] {
    overflow: hidden;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-canvas-soft);
  }
  html[data-viewport="phone"] body {
    box-sizing: border-box;
    width: var(--viewport-phone);
    height: var(--viewport-phone-tall);
    max-height: calc(100dvh - var(--space-xl));
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: calc(32px + var(--space-md));
    border-radius: 44px;
    box-shadow:
      0 0 0 2px #000000,
      0 0 0 14px #3a3a40,
      0 0 0 16px #17171b,
      0 24px 70px -16px rgba(0, 0, 0, 0.55);
  }
  /* Fixed to the frame, not to the scrolling body: a direct flex child of the
     scroller cannot be sticky (zero travel), so the island rode off on scroll.
     The frame is centred and height-capped, so its top is derivable; the island
     sits a status strip below it, and the body padding-top clears the first
     content, which then scrolls beneath, as on iOS. */
  html[data-viewport="phone"] body::before {
    content: "";
    position: fixed;
    top: calc(
      (100dvh - min(var(--viewport-phone-tall), 100dvh - var(--space-xl))) / 2 +
        var(--space-sm)
    );
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: block;
    width: 116px;
    height: 32px;
    border-radius: var(--radius-full);
    background: #000000;
  }
}