@layer components {
  /* A phone in Safari, drawn around a screen: the bezel, the status bar, the address bar and the
     toolbar. It is hardware, so it looks the same in both themes. It lays out at a phone's true
     size and scales as one, so what runs inside lays out exactly as on a phone; whoever places
     it holds the scaled box. */
  .site-device {
    inline-size: fit-content;
    padding: var(--site-device-bezel);
    border-radius: var(--site-device-radius);
    background-color: var(--color-device);
    box-shadow: var(--elev-device);
    transform: scale(var(--site-device-scale));
    transform-origin: top left;
  }

  .site-device__screen {
    position: relative;
    inline-size: var(--site-device-screen-inline-size);
    block-size: var(--site-device-screen-block-size);
    border-radius: var(--site-device-screen-radius);
    background-color: var(--color-device-screen);
    overflow: hidden;
  }

  .site-device__view {
    position: absolute;
    inset: var(--site-device-chrome-top) var(--space-0) var(--site-device-chrome-bottom);
  }

  .site-device__chrome {
    position: absolute;
    inset: var(--space-0);
    pointer-events: none;
  }

  .site-device__bar {
    position: absolute;
    inset-inline: var(--space-0);
    display: flex;
    flex-direction: column;
    background-color: var(--color-device-bar);
  }

  .site-device__bar--top {
    inset-block-start: var(--space-0);
    block-size: var(--site-device-chrome-top);
  }

  .site-device__bar--bottom {
    inset-block-end: var(--space-0);
    block-size: var(--site-device-chrome-bottom);
    justify-content: space-between;
    border-block-start: var(--border-width) solid var(--color-device-bar-rule);
  }

  .site-device__status {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    block-size: var(--site-device-status-block-size);
    padding: var(--site-device-status-pad);
    font: var(--type-site-device-status);
    color: var(--color-device-ink);
  }

  .site-device__status-icons {
    display: flex;
    align-items: center;
    gap: var(--site-device-status-gap);
  }

  .site-device__address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--site-device-address-margin);
    padding: var(--space-4);
    border-radius: var(--site-device-address-radius);
    background-color: var(--color-device-field);
    font: var(--type-site-device-address);
    color: var(--color-device-field-ink);
  }

  .site-device__lock {
    font: var(--type-site-device-lock);
    opacity: var(--site-device-lock-rest);
  }

  .site-device__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--site-device-toolbar-pad);
    font: var(--type-site-device-toolbar);
    color: var(--color-device-control);
  }

  .site-device__home {
    inline-size: var(--site-device-home-inline-size);
    block-size: var(--site-device-home-block-size);
    margin: var(--space-0) auto var(--site-device-home-margin);
    border-radius: var(--site-device-home-radius);
    background-color: var(--color-device-home);
    opacity: var(--site-device-home-rest);
  }
}