@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. */
  .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);
    max-block-size: var(--site-window-block-size);
    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: hidden;
  }

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

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

  .site-window--whole .site-window__screen {
    max-block-size: none;
  }
}