@layer components {
  /* A screen of the app at its real size, standing on the page as an object: no frame, no
     device, one soft shadow. A picture of the thing, so nothing in it can be tapped. It shows
     all it holds; what it holds runs the full width of the screen, as it does in the app. */
  .site-window {
    inline-size: min(var(--size-fill), var(--site-window-inline-size));
  }

  .site-window__screen {
    --gutter-fluid: var(--space-6);
    --measure: none;

    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-6);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg);
    color: var(--color-ink);
    box-shadow: var(--elev-4);
    overflow: clip;
  }

  .site-window__screen > * {
    inline-size: auto;
    max-inline-size: none;
    margin-inline: var(--space-0);
  }

  .site-window__screen > .priority-list,
  .site-window__screen > .nudge-prompt,
  .site-window__screen > .drawers {
    margin-block: var(--space-0);
  }
}

@layer components {
  /* Whole, the screen runs the width its section gives it. */
  .site-window--whole {
    inline-size: var(--size-fill);
  }
}