/*
 * Device frame (structure). A drawn macOS window or a neutral phone that holds
 * a real screenshot. No laptop bezel: the window floats on the stage and casts
 * its own shadow, so no wrapper ever needs overflow:hidden.
 * Colours live in device-frame.tokens.css. Do not edit this file to re-skin.
 */
.sp-device-frame { position: relative; display: block; margin: 0; overflow: visible; }

/* ---- macOS window */
.sp-device-frame--mac {
  border-radius: var(--sp-device-frame-radius, 12px);
  background: var(--sp-device-frame-window-bg);
  box-shadow: var(--sp-device-frame-edge), var(--sp-device-frame-shadow);
  isolation: isolate;
  padding-top: var(--sp-device-frame-titlebar, 30px);
}
.sp-device-frame__bar {
  position: absolute; z-index: 2; top: 0; left: 0;
  display: flex; gap: 8px; padding: var(--sp-device-frame-lights-inset, 10px 14px);
}
.sp-device-frame__bar i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sp-device-frame-light, #d9d4ca);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.sp-device-frame__bar i:nth-child(1) { background: var(--sp-device-frame-close); }
.sp-device-frame__bar i:nth-child(2) { background: var(--sp-device-frame-min); }
.sp-device-frame__bar i:nth-child(3) { background: var(--sp-device-frame-max); }
.sp-device-frame--mac .sp-device-frame__screen {
  display: block; width: 100%; height: auto;
  border-radius: 0 0 var(--sp-device-frame-radius, 12px) var(--sp-device-frame-radius, 12px);
  /* The screenshot is the window's own surface, so rounding it is not a box cut. */
}
.sp-device-frame--mac .sp-device-frame__screen img { width: 100%; height: auto; border-radius: inherit; }

/* ---- phone */
.sp-device-frame--phone {
  width: var(--sp-device-frame-phone-w, 280px);
  aspect-ratio: 9 / 19.5;
  padding: var(--sp-device-frame-bezel, 10px);
  border-radius: var(--sp-device-frame-phone-radius, 46px);
  background: var(--sp-device-frame-titanium);
  box-shadow: var(--sp-device-frame-phone-edge), var(--sp-device-frame-shadow);
}
.sp-device-frame--phone .sp-device-frame__screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--sp-device-frame-phone-radius, 46px) - var(--sp-device-frame-bezel, 10px));
  background: var(--sp-device-frame-screen-bg);
  overflow: hidden;
}
.sp-device-frame--phone .sp-device-frame__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sp-device-frame__island {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--sp-device-frame-bezel, 10px) + 10px);
  width: 34%; height: 26px; transform: translateX(-50%);
  border-radius: 999px; background: #000;
}

/* Lift = shadow grows (hosts toggle .is-lifted). */
.sp-device-frame { transition: box-shadow 340ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1); }
.sp-device-frame.is-lifted { box-shadow: var(--sp-device-frame-edge), var(--sp-device-frame-shadow-lifted); transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .sp-device-frame { transition: none; } .sp-device-frame.is-lifted { transform: none; } }