/*
 * Device frames drawn around SealShare's screenshots: a laptop for the desktop captures
 * (1512 × 982, a MacBook 14 viewport) and a phone for the phone captures (393 × 852, an iPhone 15
 * Pro viewport). The screen keeps the capture's aspect ratio, so the frame holds its shape while an
 * image loads. The screenshots come from `composer screenshots` (tests/Screenshots/).
 *
 *   <div class="device device--laptop">
 *       <div class="device__screen"><picture>…<img …></picture></div>
 *   </div>
 */

.device {
    --bezel: #1b1530;
    --bezel-edge: #3a3355;
    --deck: #c9c2dd;
    --deck-shadow: #8f88a8;

    position: relative;
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    .device {
        --bezel: #05020f;
        --bezel-edge: #2a2244;
        --deck: #4b426a;
        --deck-shadow: #231649;
    }
}

.device__screen {
    position: relative;
    overflow: hidden;
    background: var(--surface-container-high, #e8deff);
}

.device__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ---------------------------------------------------------------- laptop */

.device--laptop {
    padding-bottom: 3.2%;
    margin-inline: 4%;
    width: auto;
}

.device--laptop .device__lid {
    position: relative;
    padding: 2.4% 2.4% 3%;
    border-radius: 3.2% 3.2% 0 0 / 4.8% 4.8% 0 0;
    background: var(--bezel);
    box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px rgb(16 6 45 / 0.45);
}

.device--laptop .device__screen {
    aspect-ratio: 1512 / 982;
    border-radius: 0.6%;
}

/* The camera notch at the top of the lid. */
.device--laptop .device__lid::before {
    content: '';
    position: absolute;
    top: 0.9%;
    left: 50%;
    width: 1%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bezel-edge);
    translate: -50% 0;
}

/* The deck: wider than the lid, with a thumb recess in the middle. */
.device--laptop::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 0;
    height: 3.2%;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    background: linear-gradient(var(--deck), var(--deck-shadow));
}

.device--laptop::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1.8%;
    z-index: 1;
    width: 14%;
    height: 1.4%;
    border-radius: 0 0 12px 12px;
    background: var(--deck-shadow);
    translate: -50% 0;
}

/* ---------------------------------------------------------------- phone */

.device--phone {
    padding: 3.4%;
    border-radius: 15% / 7%;
    background: var(--bezel);
    box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px rgb(16 6 45 / 0.5);
}

.device--phone .device__screen {
    aspect-ratio: 393 / 852;
    border-radius: 12.5% / 5.8%;
}