/* ═══════════════════════════════════════════════════════════════════════
   ios-device.css - the iPhone's hardware: everything outside #screen.

   Loaded after sim-ios.css and drawn over its first build: a dark titanium
   Pro with a thin titanium rim and an even black glass border on the front,
   frosted glass on the back with a raised camera plateau, satin rails with
   rounded edges and antenna bands, pill buttons that travel when pressed.
   Sizes, poses and hit-testing stay the engine's: the slab is still
   376 x 790 x 40 with 54px corners, so the rails, the corner facets and
   the view buttons line up as before.

   Light: ios-device.js reads the turn (--rx / --ry on .device) and sets
   --shade on every rail, corner facet and the back, from one key light
   up and to the left of the viewer; it moves the glass reflections with
   the turn (--gx on .sheen, --bgx on the back). No blend modes and no
   blur filters anywhere in the slab (see .sheen in sim-ios.css).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the front: titanium rim, black glass border ─────────────────────── */
/* the rim is a 3px border painted with the metal; 3 + 7 keeps the screen
   exactly where the old 10px padding put it */
.face-front {
    border: 3px solid transparent;
    padding: 7px;
    background:
        linear-gradient(180deg, #0c0c0e 0%, #060607 40%, #040405 100%) padding-box,
        conic-gradient(#5d6167 0deg, #3b3e43 30deg, #25272b 72deg, #3c3f44 112deg, #959aa1 135deg,
            #4a4d53 156deg, #212326 202deg, #2b2d31 252deg, #6e7379 296deg, #b8bdc3 316deg,
            #686c73 336deg, #5d6167 360deg) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),     /* the glass edge, just inside the rim */
        inset 0 1px 0 1px rgba(255,255,255,.04),
        0 0 0 .5px rgba(0,0,0,.9);                 /* the seam where rim meets the rail */
}
/* the earpiece: a hairline slot between the glass and the rim */
.dv-ear {
    position: absolute; top: .5px; left: 50%;
    width: 64px; height: 2.5px; margin-left: -32px;
    border-radius: 2px; pointer-events: none;
    background: linear-gradient(180deg, #000 0%, #17181b 100%);
    box-shadow: 0 .5px 0 rgba(255,255,255,.07);
}

/* the glass: one soft reflection band that slides as the phone turns,
   a faint top glow, and the bright edge of the glass */
.sheen {
    inset: 3px; border-radius: 51px; opacity: 1;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background:
        linear-gradient(118deg, transparent 37%, rgba(255,255,255,.065) 43%, rgba(255,255,255,.018) 48.5%,
            transparent 52%, transparent 56.5%, rgba(255,255,255,.035) 58.5%, transparent 61%)
            var(--gx, 50%) 0 / 300% 100% no-repeat,
        radial-gradient(120% 34% at 50% -6%, rgba(255,255,255,.06), transparent 62%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 1.5px 1px rgba(255,255,255,.06);
    transition: background-position .14s ease-out;
}
.device.settling .sheen { transition: background-position .55s cubic-bezier(.22,1,.36,1); }

/* ── the back: frosted glass in the same rim ─────────────────────────── */
.face-back {
    border: 3px solid transparent;
    background:
        /* the frost: a fine static grain, drawn once */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.45' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 .24 0 -.075'/></filter><rect width='160' height='160' filter='url(%23f)'/></svg>") 0 0 / 160px 160px padding-box,
        radial-gradient(110% 70% at 18% 0%, rgba(255,255,255,.07), transparent 62%) padding-box,
        linear-gradient(180deg, #2e3034 0%, #25272b 48%, #1e2023 100%) padding-box,
        conic-gradient(#5d6167 0deg, #3b3e43 30deg, #25272b 72deg, #3c3f44 112deg, #959aa1 135deg,
            #4a4d53 156deg, #212326 202deg, #2b2d31 252deg, #6e7379 296deg, #b8bdc3 316deg,
            #686c73 336deg, #5d6167 360deg) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.35),
        inset 0 0 0 1.5px rgba(255,255,255,.05),
        0 0 0 .5px rgba(0,0,0,.85);
}
/* a broad, soft reflection on the matte glass, moving with the turn */
.face-back::before {
    content: ''; position: absolute; inset: 0; border-radius: 51px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.075), rgba(255,255,255,.02) 55%, transparent)
        var(--bgx, 30%) 6% / 130% 55% no-repeat;
    transition: background-position .14s ease-out;
}
/* the key light: the back darkens as it turns away from it */
.face-back::after {
    content: ''; position: absolute; inset: -3px; border-radius: 54px; pointer-events: none;
    background: #000; opacity: var(--shade, .08);
    transition: opacity .14s ease-out;
}
.device.settling .face-back::before { transition: background-position .55s cubic-bezier(.22,1,.36,1); }
.device.settling .face-back::after  { transition: opacity .55s cubic-bezier(.22,1,.36,1); }

/* ── the camera plateau ──────────────────────────────────────────────── */
/* a raised square of polished glass about half the width, top left as seen
   from the back; the bevel catches the light top-left and falls into shadow
   bottom-right, and it throws a soft shadow on the frosted glass */
.cam-plate {
    top: 13px; left: 13px; width: 176px; height: 176px;
    border-radius: 44px; padding: 0; display: block;
    background:
        linear-gradient(140deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 26%, transparent 40%),
        linear-gradient(160deg, #36383d 0%, #2a2c30 42%, #212326 100%);
    box-shadow:
        inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.24),
        inset 5px 5px 7px -3px rgba(255,255,255,.09),     /* the slope, lit */
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset -2px -2.5px 3px rgba(0,0,0,.42),
        inset -5px -6px 8px -3px rgba(0,0,0,.3),          /* the slope, in shadow */
        0 0 0 .5px rgba(0,0,0,.65),
        0 0 0 1.5px rgba(255,255,255,.035),
        1px 3px 4px rgba(0,0,0,.45),
        4px 10px 18px rgba(0,0,0,.32);
}
.cam-plate::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.02) 50%, transparent 54%)
        var(--bgx, 30%) 0 / 300% 100% no-repeat;
    transition: background-position .14s ease-out;
}
.device.settling .cam-plate::before { transition: background-position .55s cubic-bezier(.22,1,.36,1); }

/* three lenses, each in a raised metal ring: two on the left, one to the right */
.cam-plate .lens, .cam-plate .lens.small {
    position: absolute; width: 70px; height: 70px; margin: 0; padding: 0;
    box-sizing: border-box; border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 47%, rgba(0,0,0,.6) 48.5%, transparent 51%),
        conic-gradient(#3b3e43 0deg, #2a2c30 40deg, #41444a 90deg, #8e939a 128deg, #45484e 150deg,
            #2a2c30 200deg, #33363a 250deg, #7c8188 300deg, #c3c8ce 318deg, #5c6067 338deg, #3b3e43 360deg);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        1px 3px 3px rgba(0,0,0,.55),
        3px 7px 11px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.16),
        inset 1px 1px 1px rgba(255,255,255,.18);
}
.cam-plate .lens:nth-child(1) { left: 14px; top: 12px; }
.cam-plate .lens:nth-child(2) { left: 14px; top: 94px; }
.cam-plate .lens:nth-child(3) { left: 92px; top: 53px; }
/* the glass: black barrel, coloured coatings, a dark pupil */
.cam-plate .lens::before {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    background:
        radial-gradient(circle, #03040a 0 21%, transparent 23%),
        radial-gradient(circle, transparent 0 24%, rgba(104,80,200,.4) 28%, rgba(44,32,96,.2) 33%, transparent 38%),
        radial-gradient(circle, transparent 0 39%, rgba(44,150,132,.28) 43.5%, transparent 48%),
        radial-gradient(circle, transparent 0 54%, #0a0b0e 56%, #17181c 68%, #060607 100%),
        radial-gradient(circle at 45% 40%, #1d2334 0%, #0b0d14 62%);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.8);
}
/* the light on the glass: one glint, a small blue one, a ring in the barrel */
.cam-plate .lens::after {
    content: ''; position: absolute; inset: 7px; display: block;
    width: auto; height: auto; margin: 0; border-radius: 50%;
    background:
        radial-gradient(ellipse 30% 18% at 36% 30%, rgba(255,255,255,.5), transparent 70%),
        radial-gradient(circle at 64% 68%, rgba(150,190,255,.24) 0 5%, transparent 11%),
        radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.07) 62%, transparent 66%);
}
/* the fourth hole is the depth scanner: a small flat black disc */
.cam-plate .lens:nth-child(4), .cam-plate .lens.small:nth-child(4) {
    left: 116px; top: 132px; width: 22px; height: 22px;
    background: radial-gradient(circle at 45% 40%, #25272c 0%, #0c0d0f 70%);
    box-shadow: 0 0 0 1.5px #3a3d42, 0 0 0 2.5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.9);
}
.cam-plate .lens:nth-child(4)::before { content: none; }
.cam-plate .lens:nth-child(4)::after {
    inset: 3px;
    background: radial-gradient(ellipse 42% 26% at 38% 32%, rgba(255,255,255,.22), transparent 70%);
}
/* the flash: a frosted warm disc with fine rings; it lights with the torch */
.dv-flash {
    position: absolute; left: 116px; top: 22px; width: 22px; height: 22px; border-radius: 50%;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle, rgba(0,0,0,.07) 0 1px, transparent 1px 2.2px),
        radial-gradient(circle, #f6f1e3 0 26%, #e2dbc8 52%, #b9b2a0 76%, #87816f 100%);
    box-shadow: 0 0 0 1.5px #303236, 0 0 0 2.5px rgba(0,0,0,.55), inset 0 0 2px rgba(0,0,0,.4);
    transition: box-shadow .25s ease, background .25s ease;
}
.device.dv-torch .dv-flash {
    background:
        repeating-radial-gradient(circle, rgba(255,214,140,.18) 0 1px, transparent 1px 2.2px),
        radial-gradient(circle, #fff 0 42%, #fff6de 70%, #ffe7ad 100%);
    box-shadow: 0 0 0 1.5px #303236, 0 0 10px 4px rgba(255,244,214,.85), 0 0 30px 12px rgba(255,236,190,.35);
}
/* the microphone between the top lens and the flash */
.dv-mic {
    position: absolute; left: 97px; top: 18px; width: 6px; height: 6px; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #000 0 45%, #2c2e32 62%, #1b1c1f 100%);
    box-shadow: 0 .5px 0 rgba(255,255,255,.12);
}

/* ── the rails: satin titanium, rounded into the glass at both edges ─── */
/* across the thickness: a dark seam, the bright roundover, the flat satin
   band, the roundover again; along the length, a faint brushed grain.
   Plastic antenna bands cross the rails where a real frame is cut. */
.edge {
    box-shadow: inset 0 0 0 60px rgba(0,0,0,var(--shade, .1));
    transition: opacity .25s ease, box-shadow .14s ease-out;
}
.device.settling .edge { transition: opacity .25s ease, box-shadow .55s cubic-bezier(.22,1,.36,1); }
.edge-r, .edge-l {
    background:
        linear-gradient(180deg, transparent 0 40px, rgba(14,15,17,.42) 40px 45px, transparent 45px calc(100% - 45px),
            rgba(14,15,17,.42) calc(100% - 45px) calc(100% - 40px), transparent calc(100% - 40px)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
        linear-gradient(90deg, #0e0f11 0%, #34363a 4%, #80858d 9.5%, #4f5258 16%, #3e4146 26%, #46494e 50%,
            #3e4146 74%, #4f5258 84%, #71757c 90.5%, #2e3034 96%, #0e0f11 100%);
}
.edge-t, .edge-b {
    background:
        linear-gradient(90deg, transparent 0 30%, rgba(14,15,17,.42) 30% calc(30% + 5px), transparent calc(30% + 5px)),
        repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
        linear-gradient(180deg, #0e0f11 0%, #34363a 4%, #80858d 9.5%, #4f5258 16%, #3e4146 26%, #46494e 50%,
            #3e4146 74%, #4f5258 84%, #71757c 90.5%, #2e3034 96%, #0e0f11 100%);
}
.edge-b {
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
        linear-gradient(180deg, #0e0f11 0%, #34363a 4%, #80858d 9.5%, #4f5258 16%, #3e4146 26%, #46494e 50%,
            #3e4146 74%, #4f5258 84%, #71757c 90.5%, #2e3034 96%, #0e0f11 100%);
}
/* corner facets, built by ios-device.js (more of them than the engine's
   three, so the corner reads as a curve) - the same metal, their own light */
.corner {
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
        linear-gradient(180deg, #0e0f11 0%, #34363a 4%, #80858d 9.5%, #4f5258 16%, #3e4146 26%, #46494e 50%,
            #3e4146 74%, #4f5258 84%, #71757c 90.5%, #2e3034 96%, #0e0f11 100%);
    box-shadow: inset 0 0 0 30px rgba(0,0,0,var(--shade, .1));
    transition: opacity .25s ease, box-shadow .14s ease-out;
}
.device.settling .corner { transition: opacity .25s ease, box-shadow .55s cubic-bezier(.22,1,.36,1); }

/* the bottom: USB-C port between two screws, speaker and microphone holes */
.port {
    top: 12px; width: 48px; height: 16px; border-radius: 8px;
    background: linear-gradient(180deg, #030304 0%, #0b0c0e 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 0 0 1.5px rgba(0,0,0,.5), inset 0 2px 3px rgba(0,0,0,.95);
}
.port::after {
    content: ''; position: absolute; left: 10px; right: 10px; top: 6px; height: 4px; border-radius: 2px;
    background: linear-gradient(180deg, #2a2c30, #17181b);
}
.grille {
    top: 17px; width: 60px; height: 6px; border-radius: 0;
    background: radial-gradient(circle at 3px 3px, #030405 0 2.1px, rgba(255,255,255,.1) 2.5px, transparent 3px) 0 0 / 10px 6px repeat-x;
}
.grille.left { left: 22px; } .grille.right { right: 22px; }
.dv-screw {
    position: absolute; top: 16.5px; width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, #121315 0 1.3px, transparent 1.8px),
        radial-gradient(circle at 40% 35%, #8f949b, #42454a 60%, #1e1f22);
    box-shadow: 0 0 0 .5px rgba(0,0,0,.65), inset 0 0 0 .5px rgba(255,255,255,.12);
}
.dv-screw.left { left: 94px; } .dv-screw.right { right: 94px; }

/* ── the buttons: titanium pills with polished edges ─────────────────── */
/* lighter than the rail so they read at a glance; a dark seam round each,
   a shadow along the rail below it. Pressed, the seam closes, the shadow
   shrinks and the pill narrows: a short travel into the frame. */
.btn3d {
    left: 6px; width: 28px; border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 84%, rgba(0,0,0,.34) 100%),
        linear-gradient(90deg, #1d1e21 0%, #6f747b 10%, #8b9098 17%, #585c63 33%, #4f5359 50%,
            #585c63 67%, #8b9098 83%, #6f747b 90%, #1d1e21 100%);
    box-shadow:
        0 0 0 1.5px rgba(0,0,0,.62),
        0 0 0 2.5px rgba(255,255,255,.06),
        0 4px 4px -1px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.26);
    transition: transform .07s ease, filter .07s ease, box-shadow .07s ease;
}
.btn3d:hover { filter: brightness(1.18); }
.btn3d.press {
    transform: translateZ(0) scale(.92, .985);
    filter: brightness(.84);
    box-shadow:
        0 0 0 1.5px rgba(0,0,0,.78),
        0 0 0 2.5px rgba(255,255,255,.04),
        0 1px 1px rgba(0,0,0,.5),
        inset 0 1px 3px rgba(0,0,0,.5);
}

/* ── the contact shadow: soft gradients, no blur filter ──────────────── */
.shadow {
    width: 336px; height: 64px; bottom: -50px; filter: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.3) 36%, rgba(0,0,0,.1) 68%, transparent 100%);
}
.shadow::before {
    content: ''; position: absolute; left: 13%; right: 13%; top: 32%; bottom: 32%;
    background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.2) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .sheen, .face-back::before, .face-back::after, .cam-plate::before,
    .edge, .corner, .btn3d, .dv-flash { transition: none !important; }
}

/* The back logo is a character that exists only in Apple fonts: on Windows it drew an empty box. A clean back instead. */
.back-logo { display: none; }