/* The Android phone and tablet frames: used by the app builder's preview and
   by the demo on the landing page. A device is drawn at its real pixel size
   and scaled to fit with a transform. */

.device-slot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* The box takes the scaled size in the layout; the device inside is drawn at
   its real pixel size and scaled down with a transform. */
.device-box {
  position: relative;
  flex: none;
}

.device {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--bezel);
  border-radius: var(--radius);
  background: #111318;
  box-shadow: inset 0 0 0 1.5px #2a2e38, 0 0 0 1.5px #3a3f4b, 0 40px 80px rgba(0, 0, 0, 0.55);
  transform-origin: 0 0;
}

/* Hardware details drawn on the frame. */
.device-key {
  position: absolute;
  border-radius: 2px;
  background: #3a3f4b;
}

.device-phone .key-power {
  right: -4px;
  top: 190px;
  width: 4px;
  height: 64px;
}

.device-phone .key-volume {
  right: -4px;
  top: 290px;
  width: 4px;
  height: 110px;
}

.device-phone.is-landscape .key-power {
  right: auto;
  top: -4px;
  left: 190px;
  width: 64px;
  height: 4px;
}

.device-phone.is-landscape .key-volume {
  right: auto;
  top: -4px;
  left: 290px;
  width: 110px;
  height: 4px;
}

.device-camera {
  position: absolute;
  top: calc(var(--bezel) / 2);
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #05060a;
  box-shadow: 0 0 0 1.5px #262a34;
  transform: translate(-50%, -50%);
}

.device-phone.is-landscape .device-camera {
  top: 50%;
  left: calc(var(--bezel) / 2 + 1px);
}

.device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) - var(--bezel));
  background: #000;
}

/* Android system bars. */
.device-status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #000;
  color: #f1f3f4;
  font-family: Roboto, "Google Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.device-tablet .device-status {
  padding: 0 24px;
  font-size: 13px;
}

.device-indicators {
  display: inline-flex;
}

.device-punch-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #05060a;
  box-shadow: 0 0 0 2px #15171d;
  transform: translate(-50%, -50%);
}

.device-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.device-content.is-side {
  flex-direction: row;
}

.device-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18%;
  height: var(--nav);
  background: #000;
  color: #e8eaed;
}

.device-tablet .device-nav {
  gap: 14%;
}

/* On the side, back sits at the bottom and recents at the top. */
.device-nav.is-side {
  flex-direction: column-reverse;
  gap: 22%;
  width: var(--nav);
  height: auto;
}

.device-view {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.device-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.device-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
}

.device-overlay.is-empty,
.device-overlay.is-building {
  background: #0d1017;
}

.device-overlay.is-updating {
  background: rgba(8, 10, 14, 0.74);
  backdrop-filter: blur(3px);
}

.overlay-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 20px;
  background: var(--accent-soft);
  color: #b9b0ff;
}

.overlay-mark .icon {
  width: 30px;
  height: 30px;
}

.overlay-title {
  margin-top: 18px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
}

.overlay-detail {
  min-height: 22px;
  margin-top: 6px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.device-caption {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}