/* Screen wrapper layout for hero and demo handsets (see phone.css for the shared frame). */

.arin-phone .phone__screen {
  grid-column: 2;
  grid-row: 2 / 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--phone-screen-radius);
  background: var(--phone-screen);
  position: relative;
  z-index: 1;
  clip-path: inset(0 round var(--phone-screen-radius));
}

.arin-phone.phone:has(.phone__screen) .phone__header {
  grid-column: 1;
  grid-row: 1;
  clip-path: none;
}

.arin-phone.phone:has(.phone__screen) .phone__thread {
  grid-column: 1;
  grid-row: 2;
  clip-path: none;
  overflow: auto;
  overflow-x: clip;
}

.arin-phone.phone:has(.phone__screen) .phone__composer {
  grid-column: 1;
  grid-row: 3;
  clip-path: none;
}