/* ══ Every phone on the site: the screens, the apps and the secrets ══
   Moved out of home.css on 6 Nov so the Website Assistant page's phone runs
   the same ones (Lachlan: "All phones should operate the same secrets").
   Each phone's frame stays with its page; everything inside the glass is here.
   Scoped to the pages that carry a phone, at the same weight it had in
   home.css, so nothing here outranks what it used to. */
.hm-device { --hm-ease: var(--a-ease, cubic-bezier(.22, 1, .36, 1)) }

body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__screen {
    position: absolute; inset: .46em;
    overflow: hidden;
    background: linear-gradient(170deg, #2f73e6 0%, #1a4cb0 52%, #122f6e 100%);
    border-radius: 2.32em;
    color: #fff;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__island {
    position: absolute; z-index: 3; top: .62em; left: 50%;
    width: 5em; height: 1.4em;
    margin-left: -2.5em;
    background: #050a18;
    border-radius: 1em;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__status { position: absolute; z-index: 3; top: .92em; right: 1.15em; display: block; width: 2.3em; height: auto }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__bar {
    position: absolute; z-index: 3; bottom: .5em; left: 50%;
    width: 5.6em; height: .26em;
    translate: -50% 0;
    background: #fff;
    border-radius: 1em;
}

/* this morning */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__lock { position: absolute; inset: 0; display: block; padding: 3.9em .72em 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__day { display: block; font-size: 1.04em; font-weight: 500; text-align: center }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__time { display: block; font-size: 4.9em; font-weight: 600; line-height: 1.04; letter-spacing: -.03em; text-align: center }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__note {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    width: 100%; text-align: left;
    gap: .6em;
    margin-top: .55em;
    padding: .72em .75em;
    background: rgba(255, 255, 255, .95);
    border-radius: 1.2em;
    font-size: 1em; line-height: 1.28;
    color: #16233f;
    box-shadow: 0 .5em 1.2em -.5em rgba(5, 12, 30, .55);
    transition: opacity .4s linear, transform .62s var(--hm-ease);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__note--call { margin-top: 1.6em }
/* Lachlan's texts stay on the lock screen once they arrive (6 Nov) */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__note--lach:not(.is-on) { display: none }
html.hm-anim body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__note--lach.is-on { animation: hm-said .5s var(--hm-ease) both }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__note--lach b { display: flex; justify-content: space-between; gap: .5em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__note--lach b i { font-size: .82em; font-style: normal; font-weight: 400; color: #6e7a90 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__last { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1 }
/* three notes and the tools share the screen, so the first one comes up a little */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device :is(.hm-phone__lock, .hm-phone__declined):has(.hm-phone__note--lach.is-on) :is(.hm-phone__note--call, .hm-phone__note--a) { margin-top: .9em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__note svg { display: block; width: 2em; height: 2em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__note b { display: block }
/* they vanish only once the call screen has covered them, or the lock screen flashes empty */
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__note,
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="missed"] .hm-phone__note--msg { opacity: 0; transform: translateY(-1.8em) scale(.96); transition-duration: 0s; transition-delay: .25s }
/* for anyone who doesn't know the swipe: it says so, and a click does it too */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__open {
    position: absolute; z-index: 1; bottom: 2.35em; left: 50%;
    translate: -50% 0;
    padding: .3em .6em;
    font-size: .74em; font-weight: 500; white-space: nowrap;
    color: rgba(255, 255, 255, .85);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__open:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device:not([data-phone="message"]):not([data-phone="missed"]):not([data-phone="locked"]) .hm-phone__lock .hm-phone__open { visibility: hidden }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tools {
    position: absolute; bottom: 1.5em; left: 1.5em; right: 1.5em;
    display: flex; justify-content: space-between;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tools i {
    display: grid; place-items: center;
    width: 2.7em; height: 2.7em;
    background: rgba(7, 16, 40, .42);
    border-radius: 50%;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tools svg { display: block; width: 1.3em; height: 1.3em }

/* last night */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__call {
    position: absolute; z-index: 2; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 4em .9em 2.1em;
    background: linear-gradient(180deg, #16305f 0%, #0a1430 100%);
    opacity: 0; visibility: hidden;
    transition: opacity .32s linear, visibility 0s linear .32s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__call { opacity: 1; visibility: visible; transition-duration: .2s, 0s; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__clock { position: absolute; top: .75em; left: 1.3em; font-size: .92em; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__incoming { font-size: .98em; color: #b9cdf3 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__who { margin-top: .12em; font-size: 1.6em; line-height: 1.15; letter-spacing: -.015em; text-align: center }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__face {
    position: relative;
    display: grid; place-items: center;
    width: 5.6em; height: 5.6em;
    margin-top: 2.4em;
    background: rgba(185, 205, 243, .22);
    border-radius: 50%;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__face svg { display: block; width: 3.1em; height: 3.1em; opacity: .92 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__face::before,
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__face::after {
    content: ""; position: absolute; inset: 0;
    border: .14em solid rgba(138, 178, 245, .75);
    border-radius: 50%;
    opacity: 0;
}
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__face::before,
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__face::after { animation: hm-ring 1.7s cubic-bezier(.2, .6, .4, 1) infinite }
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__face::after { animation-delay: .55s }
@keyframes hm-ring {
    from { opacity: .85; transform: scale(1) }
    to { opacity: 0; transform: scale(1.75) }
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__acts { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-inline: .7em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__act { display: grid; justify-items: center; gap: .4em; font-size: .86em; color: #dbe6fb }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__btn {
    display: grid; place-items: center;
    width: 3.9em; height: 3.9em;
    background: rgba(255, 255, 255, .17);
    border-radius: 50%;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__btn svg { display: block; width: 1.9em; height: 1.9em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__btn--take { background: #2f7bf0 }
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="ring"] .hm-phone__btn--take { animation: hm-take 1.7s ease-in-out infinite }
@keyframes hm-take {
    0%, 42%, 100% { transform: translateY(0) }
    14% { transform: translateY(-.34em) }
    28% { transform: translateY(0) }
}

/* ── the phone's easter eggs (owner, 6 Nov) ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device button {
    appearance: none; margin: 0; padding: 0;
    background: none; border: 0; color: inherit; font: inherit;
    cursor: pointer;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device button:focus-visible { outline: .14em solid #fff; outline-offset: .14em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tools .hm-phone__tool {
    display: grid; place-items: center;
    width: 2.7em; height: 2.7em;
    background: rgba(7, 16, 40, .42);
    border-radius: 50%;
    transition: background .25s, transform .2s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tool:active { transform: scale(.92) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__tool svg { display: block; width: 1.3em; height: 1.3em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device:not([data-phone="message"]):not([data-phone="missed"]):not([data-phone="locked"]) .hm-phone__lock .hm-phone__tools { visibility: hidden }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__act { display: grid; justify-items: center; gap: .4em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__act:hover .hm-phone__btn { filter: brightness(1.12) }

/* torch: the screen lifts and the phone throws light on the desk */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__screen { transition: filter .35s var(--hm-ease) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-torch .hm-phone__screen { filter: brightness(1.28) saturate(1.1) }
/* where the torch sits on the back of the phone; home.js lights the desk from here */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__lamp { position: absolute; top: 1.5em; right: 1.5em; width: 0; height: 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-torch .hm-phone__tool[data-phone-act="torch"] { background: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-torch .hm-phone__tool[data-phone-act="torch"] svg { fill: #16233f }

/* the three screens a button opens */
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-phone__live, .hm-phone__declined, .hm-phone__cam, .hm-phone__back) {
    position: absolute; z-index: 2; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .3s linear, visibility 0s linear .3s, transform .45s var(--hm-ease);
}
body:is(.apex-hm, .apex-waa, .apex-hub) :is([data-phone="live"] .hm-phone__live, [data-phone="declined"] .hm-phone__declined, [data-phone="camera"] .hm-phone__cam, [data-phone="back"] .hm-phone__back) {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
}
/* answered */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__live {
    padding: 4em 1em 2.1em;
    background: linear-gradient(180deg, #16305f 0%, #0a1430 100%);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__timer { margin-top: .2em; font-size: .95em; font-variant-numeric: tabular-nums; color: #b9cdf3 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__said {
    position: relative;
    margin-top: 1.5em;
    padding: .8em .95em;
    background: rgba(255, 255, 255, .95);
    border-radius: 1.1em 1.1em 1.1em .3em;
    font-size: 1.02em; font-weight: 500; line-height: 1.3;
    color: #16233f;
    box-shadow: 0 .5em 1.2em -.5em rgba(5, 12, 30, .55);
}
html.hm-anim body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="live"] .hm-phone__said { animation: hm-said .5s var(--hm-ease) .9s both }
@keyframes hm-said { from { opacity: 0; transform: translateY(.8em) scale(.96) } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__btn--end { background: #e5484d }

/* declined */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__declined {
    padding: 3.9em .72em 3.4em;
    background: linear-gradient(170deg, #2f73e6 0%, #1a4cb0 52%, #122f6e 100%);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__declined .hm-phone__note { width: 100% }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__declined .hm-phone__note--a { margin-top: 1.6em }
html.hm-anim body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="declined"] .hm-phone__note--a { animation: hm-said .5s var(--hm-ease) .35s both }
html.hm-anim body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="declined"] .hm-phone__note--b { animation: hm-said .5s var(--hm-ease) 1.5s both }

/* the camera, opening out of its button the way a phone's does */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__cam {
    padding: 3em 0 2.2em;
    background: #000;
    transform: scale(.12);
    transform-origin: 82% 92%;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__top {
    position: absolute; top: 1em; left: 1.2em; right: 1.2em;
    display: flex; justify-content: space-between; align-items: center;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__top svg { width: 1.15em; height: 1.15em; opacity: .9 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-cam__home { display: flex; align-items: center; font-size: .82em; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__home svg { width: 1.3em; height: 1.3em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__top i { padding: .1em .5em; background: #ffd60a; border-radius: .3em; font-size: .7em; font-weight: 600; color: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__view { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__view img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__zoom {
    position: absolute; bottom: .7em; left: 50%;
    display: grid; place-items: center;
    width: 2.2em; height: 2.2em; margin-left: -1.1em;
    background: rgba(0, 0, 0, .45); border-radius: 50%;
    font-size: .78em; font-weight: 600; color: #ffd60a;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-shot .hm-cam__flash { animation: hm-flash .55s ease-out }
@keyframes hm-flash { 0% { opacity: .95 } 100% { opacity: 0 } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__modes { display: flex; gap: 1.1em; margin-top: .9em; font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__modes i { opacity: .6 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__modes b { color: #ffd60a }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-top: auto; padding: 0 1.5em;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-cam__thumb {
    width: 2.6em; height: 2.6em;
    border-radius: .45em;
    background: #222 center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .35) !important;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-shot .hm-cam__thumb { animation: hm-pop .4s var(--hm-ease) }
@keyframes hm-pop { from { transform: scale(.6) } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__shutter {
    width: 4.2em; height: 4.2em;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 0 0 .22em #000, 0 0 0 .42em #fff;
    transition: transform .15s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__shutter:active { transform: scale(.9) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-cam__flip { display: grid; place-items: center; width: 2.6em; height: 2.6em; background: rgba(255, 255, 255, .14); border-radius: 50% }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__stop { position: absolute; inset: 0; opacity: 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-stopped .hm-cam__stop { opacity: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-stopped .hm-cam__shutter { cursor: default; opacity: .55 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cam__flip svg { width: 1.3em; height: 1.3em }
/* (0,3,1): the bar is a button, and the phone's button reset (0,2,2) had made it invisible */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__bar { cursor: pointer; touch-action: none; background: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__bar::before { content: ""; position: absolute; inset: -1em -2em -.5em }
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="camera"] .hm-phone__bar { background: #fff }


/* the call controls a real call screen has */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__keys {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em;
    width: 100%; margin: auto 0 1.4em; padding: 0 .4em;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__keys i { display: grid; justify-items: center; gap: .35em; font-size: .78em; color: #dbe6fb }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__keys svg {
    box-sizing: content-box;
    width: 1.6em; height: 1.6em; padding: .95em;
    background: rgba(255, 255, 255, .15); border-radius: 50%;
}

/* ── Photos: the shots taken here, then his best nachos (owner, 6 Nov) ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__photos {
    position: absolute; z-index: 2; inset: 0;
    display: flex; flex-direction: column;
    padding: 2.5em 0 1.3em;
    background: #000;
    opacity: 0; visibility: hidden;
    transform: scale(.94);
    transition: opacity .25s linear, visibility 0s linear .25s, transform .35s var(--hm-ease);
}
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="photos"] .hm-phone__photos { opacity: 1; visibility: visible; transform: none; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__top { display: grid; grid-template-columns: 3em 1fr 3em; align-items: center; padding: 0 .5em .4em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-ph__back { display: grid; place-items: center; width: 2.2em; height: 2.2em; color: #0a84ff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__back svg { width: 1.3em; height: 1.3em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__when { display: grid; justify-items: center; line-height: 1.2 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__when b { font-size: .92em; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__when i { font-size: .7em; font-style: normal; color: #98989f }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__edit { justify-self: end; padding-right: .3em; font-size: .9em; font-style: normal; color: #0a84ff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__stage { position: relative; flex: 1; overflow: hidden; touch-action: pan-y; cursor: grab; outline: 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__stage:active { cursor: grabbing }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__track { display: flex; height: 100%; transition: transform .38s var(--hm-ease) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__track.is-drag { transition: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__slide { flex: 0 0 100%; display: grid; place-items: center; min-width: 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__strip { display: flex; justify-content: center; gap: .14em; height: 2.3em; margin-top: .55em; overflow: hidden }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-ph__thumb {
    flex: 0 0 1.45em; height: 100%;
    background: #222 center / cover no-repeat;
    opacity: .75;
    transition: flex-basis .3s var(--hm-ease), opacity .3s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-ph__thumb.is-on { flex-basis: 2.8em; margin-inline: .2em; opacity: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__tools { display: flex; justify-content: space-between; padding: .75em 1.4em 0; color: #0a84ff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ph__tools svg { width: 1.35em; height: 1.35em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__photos.is-fav .hm-ph__heart { fill: currentColor }

/* ── the iPhone's own layer, laid out in real iPhone points and scaled to fit ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__ui {
    position: absolute; z-index: 2; top: 0; left: 0;
    width: 390px; height: calc(var(--ui-h, 750) * 1px);
    font: 400 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: -.01em;
    color: #000;
    transform: scale(var(--ui-s, .6));
    transform-origin: 0 0;
    pointer-events: none;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__ui :is(button, input, textarea, a) { pointer-events: auto }

/* the banners: one stack, newest on top, the older ones pushed down
   (6 Nov: they used to land in the same place, one over the other) */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banners {
    position: absolute; z-index: 3; top: calc(var(--ui-ib, 50) * 1px + 8px); left: 8px; right: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-banner {
    position: relative;
    display: none; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 13px 14px 13px 12px;
    background: rgba(246, 246, 248, .9);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    border-radius: 24px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .38);
    color: #000; text-align: left; font: inherit;
    touch-action: none;
    visibility: hidden;
    transform: translateY(-140%);
    /* the small overshoot is how an iPhone banner lands */
    transition: transform .55s cubic-bezier(.2, 1.25, .35, 1), opacity .3s, visibility 0s linear .55s; /* impeccable-disable-line */
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-banner.is-up { display: grid }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-banner.is-on { visibility: visible; transform: none; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-banner.is-drag { transition: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-banner.is-out { opacity: 0; visibility: hidden; transition: transform .3s ease-in, opacity .3s, visibility 0s linear .3s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mailicon {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    background: linear-gradient(180deg, #1f9bff 0%, #0a63f0 100%);
    border-radius: 9px;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mailicon svg { width: 26px; height: 26px }
/* the puzzle's texts come from Messages */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgicon { display: grid; place-items: center; width: 38px; height: 38px; background: linear-gradient(180deg, #5bf675 0%, #0cbd2a 100%); border-radius: 9px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgicon svg { width: 26px; height: 26px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner--pz .hm-banner__text { -webkit-line-clamp: 4 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__body { display: grid; min-width: 0; font-size: 15px; line-height: 1.3 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__head { display: flex; justify-content: space-between; gap: 8px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__head b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__head i { flex: none; font-style: normal; color: #6e6e73 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__subj { font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-banner__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }

/* Mail. Scoped to the phone: the home page's email cards under the three
   services are also .hm-mail, and these rules hid them (fixed 6 Nov). */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail {
    position: absolute; inset: 0;
    background: #000;
    opacity: 0; visibility: hidden;
    transition: opacity .3s linear, visibility 0s linear .3s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device[data-phone="mail"] .hm-mail { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__box {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: calc(var(--ui-ib, 50) * 1px) 0 0;
    background: #fff;
    transform-origin: 50% 0;
    transition: transform .45s var(--hm-ease), border-radius .45s, filter .45s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-composing .hm-mail__box { transform: translateY(14px) scale(.92); border-radius: 14px; filter: brightness(.82) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__clock { position: absolute; top: calc(var(--ui-it, 12) * 1px); left: 34px; display: flex; align-items: center; height: calc((var(--ui-ib, 50) - var(--ui-it, 12)) * 1px); font-size: 17px; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__nav { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 16px 0 8px; color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__nav i { display: flex; align-items: center; font-style: normal }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__nav svg { width: 24px; height: 24px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__h { padding: 6px 16px 0; font-size: 34px; font-weight: 700; letter-spacing: .01em }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__search { display: flex; align-items: center; gap: 6px; margin: 10px 16px 12px; padding: 7px 8px; background: #eeeef0; border-radius: 10px; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__search svg { width: 20px; height: 20px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__list { display: block; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 90px; overscroll-behavior: contain }
/* (0,3,1): the inbox's emails are buttons, and the phone's button reset is (0,2,2) */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__item { position: relative; display: grid; gap: 1px; width: 100%; padding: 11px 16px 12px 32px; border-bottom: 1px solid #e3e3e6; font-size: 15px; line-height: 1.3; text-align: left }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__item:active { background: #e5e5ea }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__item::before { content: ""; position: absolute; top: 18px; left: 12px; width: 10px; height: 10px; background: #007aff; border-radius: 50%; transition: opacity .3s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__item.is-read::before { opacity: 0 }
html.hm-anim body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__item.is-new { animation: hm-newmail .5s var(--hm-ease) both }
@keyframes hm-newmail { from { opacity: 0; transform: translateY(-14px) } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* reading an email: it slides in over the inbox, as Mail's does */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__read {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: calc(var(--ui-ib, 50) * 1px) 0 0;
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transform-origin: 50% 0;
    transition: transform .45s var(--hm-ease), border-radius .45s, filter .45s, visibility 0s linear .45s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-reading .hm-mail__read { transform: none; visibility: visible; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-reading .hm-mail__box { transform: translateX(-30%); filter: brightness(.9) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-reading.is-composing .hm-mail__read { transform: translateY(14px) scale(.92); border-radius: 14px; filter: brightness(.82) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rbar { padding: 8px 8px 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__inbox { display: flex; align-items: center; min-height: 44px; color: #007aff; font-size: 17px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__inbox svg { width: 26px; height: 26px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rhead { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px 12px; border-bottom: 1px solid #e3e3e6 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__av { display: grid; place-items: center; width: 40px; height: 40px; background: linear-gradient(180deg, #a5abb8, #858b98); border-radius: 50%; font-size: 15px; font-style: normal; font-weight: 600; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rwho { display: grid; min-width: 0; font-size: 15px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rwho b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rwho i, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rwhen { font-size: 13px; font-style: normal; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rsubj { padding: 14px 16px 0; font-size: 22px; font-weight: 700; line-height: 1.2 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rtext { display: grid; gap: 14px; padding: 14px 16px 120px; font-size: 17px; line-height: 1.4 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__rfoot {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: flex-end;
    padding: 6px 16px 38px;
    background: rgba(249, 249, 249, .94);
    border-top: 1px solid #e3e3e6;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__reply { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: #007aff; font-size: 17px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__reply svg { width: 26px; height: 26px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__from { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: inherit }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__from b { overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__from i { font-style: normal; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__prev { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
    padding: 6px 12px 38px;
    background: rgba(249, 249, 249, .94);
    border-top: 1px solid #e3e3e6;
    font-size: 12px; text-align: center; color: #3c3c43;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__foot > svg { width: 26px; height: 26px; color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__new { display: grid; place-items: center; width: 44px; height: 44px; color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__new svg { width: 26px; height: 26px }

/* the compose sheet */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__sheet {
    position: absolute; z-index: 1; top: calc(var(--ui-ib, 50) * 1px + 12px); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    margin: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .12);
    transform: translateY(104%);
    visibility: hidden;
    transition: transform .5s var(--hm-ease), visibility 0s linear .5s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device.is-composing .hm-mail__sheet { transform: none; visibility: visible; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 0 16px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__cancel { padding: 6px 0; font-size: 17px; color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__send {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    background: #d1d1d6;
    border-radius: 50%;
    transition: background .2s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__send.is-ready { background: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__send svg { width: 18px; height: 18px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__title { overflow: hidden; padding: 8px 16px 12px; font-size: 30px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__row {
    display: flex; align-items: center; gap: 6px;
    min-height: 46px; margin: 0 0 0 16px; padding-right: 16px;
    border-bottom: 1px solid #d8d8dc;
    font-size: 17px; cursor: text;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__row:first-of-type { border-top: 1px solid #d8d8dc }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__row > i { flex: none; font-style: normal; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__to { overflow: hidden; color: #007aff; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__row input,
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__body {
    flex: 1; min-width: 0;
    margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0;
    font: inherit; font-size: 17px; letter-spacing: inherit; color: #000;
    caret-color: #007aff;
    -webkit-appearance: none; appearance: none;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__row input::placeholder { color: #c4c4c7; opacity: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-mail__body { flex: 1; padding: 12px 16px; line-height: 1.35; resize: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__fine { margin: 0; padding: 8px 16px 40px; font-size: 12px; line-height: 1.35; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-mail__fine a { color: #007aff; text-decoration: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device :is(.hm-mail__cancel, .hm-mail__send, .hm-mail__new, .hm-banner, .hm-mail__item, .hm-mail__inbox, .hm-mail__reply):focus-visible,
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-alert button:focus-visible { outline: 2px solid #007aff; outline-offset: 2px }
/* the status bar and home bar go dark on Mail's white */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device:is([data-phone="mail"]:not(.is-composing), [data-phone="sms"], [data-phone="lach"], [data-phone="cal"], [data-phone="msgs"], [data-phone="notes"]) .hm-phone__status { fill: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device:is([data-phone="mail"]:not(.is-composing), [data-phone="sms"], [data-phone="lach"], [data-phone="cal"], [data-phone="msgs"], [data-phone="notes"]) .hm-phone__status rect[stroke] { stroke: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device:is([data-phone="mail"], [data-phone="sms"], [data-phone="lach"], [data-phone="cal"], [data-phone="msgs"], [data-phone="notes"]) .hm-phone__bar { background: #000 }
/* the back buttons home, in Mail, Messages and Notes */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-nav__home { display: flex; align-items: center; min-height: 32px; color: inherit; font-size: 17px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-nav__home svg { width: 24px; height: 24px }

/* ── the call back: they answer, and the phone captions them (owner, 6 Nov) ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__back {
    padding: 4em 1em 2.1em;
    background: linear-gradient(180deg, #16305f 0%, #0a1430 100%);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__capt {
    display: flex; flex-direction: column; justify-content: flex-end; gap: .55em;
    width: 100%; flex: 1; min-height: 0;
    margin-top: 1em; overflow: hidden;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__capt i {
    display: none;
    font-size: .98em; font-style: normal; font-weight: 500; line-height: 1.3;
    text-align: center; color: #fff;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__capt i.is-on { display: block; animation: hm-said .45s var(--hm-ease) both }
/* the line before the newest one steps back */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__capt i.is-on:has(~ i.is-on) { color: rgba(255, 255, 255, .5) }
/* two lines at a time, like live captions */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__capt i.is-on:has(~ i.is-on ~ i.is-on) { display: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__mailme {
    margin: .9em 0 1em; padding: .65em 1.3em;
    background: #fff; border-radius: 2em;
    font-size: .92em; font-weight: 600; color: #123b8c;
    visibility: hidden; opacity: 0;
    transition: opacity .35s linear;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-phone__mailme.is-on { visibility: visible; opacity: 1 }

/* ── Messages ── */
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-sms, .hm-cal) {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding-top: calc(var(--ui-ib, 50) * 1px + 4px);
    background: #fff;
    opacity: 0; visibility: hidden;
    transition: opacity .25s linear, visibility 0s linear .25s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) :is([data-phone="sms"] .hm-sms[data-sms], [data-phone="lach"] .hm-sms--lach, [data-phone="cal"] .hm-cal) { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
/* Lachlan's thread is iMessage: his initials, and blue for what you send */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__who .hm-sms__lr { font-size: 19px; font-style: normal; font-weight: 600; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms--lach .hm-sms__out { background: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms--lach .hm-sms__send { background: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__head { position: relative; display: grid; justify-items: center; padding: 4px 0 10px; background: rgba(247, 247, 248, .96); border-bottom: 1px solid #e3e3e6 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms__back { position: absolute; top: 14px; left: 6px; display: flex; align-items: center; color: #007aff; font-size: 17px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__back svg { width: 28px; height: 28px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__who { display: grid; justify-items: center; gap: 4px; font-size: 12px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__who i { display: grid; place-items: center; width: 50px; height: 50px; background: linear-gradient(180deg, #a5abb8, #858b98); border-radius: 50% }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__who svg { width: 34px; height: 34px; margin-top: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__who b { font-weight: 500 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__log { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 10px; overscroll-behavior: contain }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__stamp { align-self: center; margin-bottom: 8px; font-size: 11px; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__stamp b { font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-sms__in, .hm-sms__out, .hm-sms__dots) {
    max-width: 76%;
    margin: 0; padding: 8px 13px;
    border-radius: 19px;
    font-size: 17px; line-height: 1.28;
    overflow-wrap: anywhere;
    animation: hm-bub .3s var(--hm-ease) both;
}
@keyframes hm-bub { from { opacity: 0; transform: translateY(8px) scale(.96) } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__in, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__dots { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__out { align-self: flex-end; margin-top: 6px; background: #34c759; color: #fff; border-bottom-right-radius: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__in + .hm-sms__out, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__out + .hm-sms__in, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__out + .hm-sms__dots, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__note + .hm-sms__in, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__note + .hm-sms__dots { margin-top: 8px }
/* (0,3,1) to beat the phone's button reset; inline, so it reads as a link in the bubble */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms__link { display: inline; color: #007aff; text-decoration: underline; text-underline-offset: .12em; cursor: pointer }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__note { align-self: flex-end; font-size: 11px; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__dots { display: flex; gap: 4px; padding: 13px 14px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__dots i { width: 8px; height: 8px; background: #8e8e93; border-radius: 50%; animation: hm-dot 1.2s ease-in-out infinite }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__dots i:nth-child(2) { animation-delay: .15s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__dots i:nth-child(3) { animation-delay: .3s }
@keyframes hm-dot { 0%, 60%, 100% { opacity: .35 } 30% { opacity: 1 } }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px 40px; background: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__plus { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: #e9e9eb; border-radius: 50%; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__plus svg { width: 20px; height: 20px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms__bar input {
    flex: 1; min-width: 0; height: 36px;
    margin: 0; padding: 0 14px;
    background: #fff; border: 1px solid #d1d1d6; border-radius: 18px; box-shadow: none; outline: 0;
    font: inherit; font-size: 17px; color: #000; caret-color: #007aff;
    -webkit-appearance: none; appearance: none;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms__bar input::placeholder { color: #c4c4c7; opacity: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-sms__send { display: grid; place-items: center; flex: none; width: 30px; height: 30px; background: #34c759; border-radius: 50% }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-sms__send svg { width: 17px; height: 17px }

/* ── the home screen (6 Nov) ── */
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-home, .hm-msgs, .hm-notes) {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .25s linear, visibility 0s linear .25s, transform .35s var(--hm-ease);
}
body:is(.apex-hm, .apex-waa, .apex-hub) :is([data-phone="apps"] .hm-home, [data-phone="msgs"] .hm-msgs, [data-phone="notes"] .hm-notes) { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home {
    padding: calc(var(--ui-ib, 50) * 1px + 22px) 26px 0;
    background: linear-gradient(170deg, #2f73e6 0%, #1a4cb0 52%, #122f6e 100%);
    color: #fff;
    transform: scale(1.06);
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home .hm-mail__clock { color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 0; justify-items: center }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-widget {
    grid-column: 1 / -1; justify-self: stretch;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center;
    min-height: 150px; padding: 18px 20px;
    background: rgba(255, 255, 255, .92);
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    color: #000; text-align: left;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-widget__day { display: grid; align-self: start }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-widget__day small { font-size: 13px; font-weight: 600; color: #ff3b30 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-widget__day b { font-size: 52px; font-weight: 300; line-height: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-widget__none { display: grid; gap: 4px; font-size: 15px; color: #6e6e73 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-widget__none b { font-size: 17px; font-weight: 600; color: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-app-i { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-app-i > span { text-shadow: 0 1px 3px rgba(0, 0, 0, .35) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico {
    position: relative; overflow: hidden;
    display: grid; place-items: center;
    width: 62px; height: 62px;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    font-style: normal;
    transition: transform .15s, filter .15s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-app-i:active .hm-ico { transform: scale(.92); filter: brightness(.85) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico svg { width: 36px; height: 36px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--cal { align-content: start; gap: 0; padding-top: 6px; background: #fff; color: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--cal small { font-size: 10px; font-weight: 600; line-height: 1.1; color: #ff3b30 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--cal b { font-size: 32px; font-weight: 300; line-height: 1 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--photos { background: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--photos svg { width: 56px; height: 56px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--notes {
    background:
        linear-gradient(#ffd23f, #f7c325) top / 100% 15px no-repeat,
        repeating-linear-gradient(#fff 0 9px, #dcdce0 9px 10px) 0 15px / 100% 100% no-repeat,
        #fff;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--phone { background: linear-gradient(180deg, #5bf675 0%, #0cbd2a 100%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--phone svg { width: 34px; height: 34px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--mail { background: linear-gradient(180deg, #1f9bff 0%, #0a63f0 100%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--mail svg { width: 42px; height: 42px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--msgs { background: linear-gradient(180deg, #5bf675 0%, #0cbd2a 100%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--msgs svg { width: 42px; height: 42px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--cam { background: linear-gradient(180deg, #e8e8ed 0%, #a9a9b0 100%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-badge {
    position: absolute; top: -6px; right: -8px;
    display: none; min-width: 24px; height: 24px; padding: 0 7px;
    background: #ff3b30; border-radius: 12px;
    font-size: 14px; font-weight: 600; line-height: 24px; text-align: center; color: #fff;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-badge.is-on { display: block }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home__search {
    position: absolute; left: 50%; bottom: 146px; translate: -50% 0;
    display: flex; align-items: center; gap: 4px;
    padding: 6px 13px;
    background: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius: 16px;
    font-size: 13px; font-weight: 500;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home__search svg { width: 14px; height: 14px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-home__dock {
    position: absolute; left: 12px; right: 12px; bottom: 30px;
    display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center;
    padding: 16px 6px;
    background: rgba(255, 255, 255, .24);
    -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
    border-radius: 34px;
}

/* Messages: the list of conversations */
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-msgs, .hm-notes) { display: flex; flex-direction: column; padding-top: calc(var(--ui-ib, 50) * 1px); background: #fff; color: #000 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs .hm-mail__nav, body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes .hm-mail__nav { color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__list { display: block; padding-top: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-msgs__row {
    position: relative;
    display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; align-items: center;
    width: 100%; padding: 10px 16px 10px 26px;
    text-align: left;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-msgs__row[data-msgs-row="lach"]:not(.is-on) { display: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-msgs__row:active { background: #e5e5ea }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__row.is-unread::before { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #007aff; border-radius: 50% }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__av { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; background: linear-gradient(180deg, #a5abb8, #858b98); border-radius: 50%; font-size: 19px; font-style: normal; font-weight: 600; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__av svg { width: 34px; height: 34px; margin-top: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__top { display: flex; justify-content: space-between; gap: 8px; padding-top: 2px; border-top: 1px solid transparent }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__top b { font-size: 17px; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__top i { font-size: 15px; font-style: normal; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-msgs__prev { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.3; color: #8e8e93 }

/* Notes: a list, and one note open over it */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes { background: #f2f2f7; overflow: hidden }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes .hm-mail__nav { color: #d9a400 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__list { display: flex; flex-direction: column; transition: transform .45s var(--hm-ease) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__group { display: block; margin: 10px 16px 0; overflow: hidden; background: #fff; border-radius: 12px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-notes__row { display: grid; gap: 2px; width: 100%; padding: 11px 16px; border-bottom: 1px solid #e3e3e6; text-align: left }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-notes__row:last-child { border-bottom: 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-notes__row:active { background: #e5e5ea }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__row > b { font-size: 17px; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__row > span:not(.hm-notes__full) { overflow: hidden; font-size: 15px; color: #8e8e93; text-overflow: ellipsis; white-space: nowrap }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__row i { font-style: normal; color: #3c3c43 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__count { margin-top: 14px; font-size: 12px; text-align: center; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__page {
    position: absolute; inset: calc(var(--ui-ib, 50) * 1px) 0 0;
    display: flex; flex-direction: column;
    background: #fff;
    transform: translateX(100%); visibility: hidden;
    transition: transform .45s var(--hm-ease), visibility 0s linear .45s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes.is-open .hm-notes__page { transform: none; visibility: visible; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes.is-open .hm-notes__list { transform: translateX(-30%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__bar { padding: 8px 8px 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-notes__back { display: flex; align-items: center; min-height: 44px; color: #d9a400; font-size: 17px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__back svg { width: 26px; height: 26px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__text { display: grid; gap: 12px; padding: 8px 20px; font-size: 17px; line-height: 1.4 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-notes__text > b { font-size: 26px; font-weight: 700; line-height: 1.2 }

/* ── Calendar: the week with nothing in it ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__nav { padding: 6px 6px 0 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal .hm-sms__back { position: static; color: #ff3b30 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 14px; padding: 0 8px 10px; border-bottom: 1px solid #e3e3e6; text-align: center }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__week span { display: grid; justify-items: center; gap: 6px }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__week i { font-size: 11px; font-style: normal; color: #8e8e93 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__week b { display: grid; place-items: center; width: 34px; height: 34px; font-size: 19px; font-weight: 400 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__week .is-today b { background: #ff3b30; border-radius: 50%; font-weight: 600; color: #fff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__day { padding: 14px 16px 0; font-size: 15px; font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-cal__none { margin-top: 38%; font-size: 20px; text-align: center; color: #8e8e93 }

/* the alerts, the way iOS draws them */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert {
    position: absolute; z-index: 4; inset: 0;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .28);
    opacity: 0; visibility: hidden;
    transition: opacity .2s linear, visibility 0s linear .2s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert__box {
    width: 270px;
    overflow: hidden;
    background: rgba(242, 242, 242, .94);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    border-radius: 14px;
    text-align: center;
    transform: scale(1.12);
    /* iOS alerts settle with this slight spring */
    transition: transform .3s cubic-bezier(.2, 1.2, .4, 1); /* impeccable-disable-line */
}
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert.is-on .hm-alert__box { transform: none }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert__box > b { display: block; padding: 19px 16px 2px; font-size: 17px; font-weight: 600; line-height: 1.3 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert__box > p { margin: 0; padding: 0 16px 19px; font-size: 13px; line-height: 1.38 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-alert__box > span { display: flex; border-top: 1px solid rgba(60, 60, 67, .29) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-alert__box button { flex: 1; height: 44px; font-size: 17px; color: #007aff }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-alert__box button + button { border-left: 1px solid rgba(60, 60, 67, .29) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-alert__box button.is-main { font-weight: 600 }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-device .hm-alert__box button:active { background: rgba(0, 0, 0, .06) }

/* ── a lock screen of its own, for a phone whose first screen is something
   else (the bot call, the Website Assistant chat). It covers that screen. ── */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__lock--own {
    z-index: 2;
    background: linear-gradient(170deg, #2f73e6 0%, #1a4cb0 52%, #122f6e 100%);
    color: #fff;
    opacity: 0; visibility: hidden;
    /* it goes only once the next screen has covered it, or the first screen shows through */
    transition: opacity 0s linear .45s, visibility 0s linear .45s;
}
body:is(.apex-hm, .apex-waa, .apex-hub) [data-phone="locked"] .hm-phone__lock--own { opacity: 1; visibility: visible; transition: opacity .3s linear }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-phone__lock--own > .hm-phone__time + .hm-phone__note { margin-top: 1.6em }

/* Safari, on the phone whose first screen is a website */
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--safari { background: linear-gradient(180deg, #4fb6ff 0%, #1677f2 100%) }
body:is(.apex-hm, .apex-waa, .apex-hub) .hm-ico--safari svg { width: 80%; height: 80% }

/* a torch on a phone with no desk under it lights the page around it */
body:is(.apex-hm, .apex-waa, .apex-hub) :is(.hm-handset, .waa-ph).is-torch { box-shadow: 0 0 0 1px #39496d, 0 0 90px 40px rgba(255, 232, 160, .6), 0 0 220px 90px rgba(255, 232, 160, .3) }

/* ── the Website Assistant page's phone: the same glass on a white first
   screen. Its own chat keeps its own sizes; the shared screens take the
   home page handset's 15px. ── */
body.apex-waa .waa-ph__screen > :is(.hm-phone__lock, .hm-phone__cam, .hm-phone__photos, .hm-phone__back, .hm-phone__status, .hm-phone__bar) { font-size: 15px; line-height: 1.3 }
body.apex-waa .waa-ph__screen > :is(.hm-phone__cam, .hm-phone__photos, .hm-phone__back) { color: #fff }
body.apex-waa .waa-ph[data-phone="chat"] .hm-phone__status { display: none }
body.apex-waa .waa-ph[data-phone="chat"] .hm-phone__bar { background: #0b1220 }