/* demo-embed.css -- the website demo only (scripts/sync-demo.py links it
   into index.html; the app never loads it).

   Everything here applies only under html.looxx-demo-embed, which the
   inline script at the top of index.html sets when the page runs inside
   the site's phone mockup (and not in the fullscreen ?immersive demo). */

/* ================================================================
   iOS status bar replica -- demo embed only (see the <head> script)
   ================================================================
   The phone artwork draws an empty Dynamic Island with nothing in it.
   A real device always has the OS's own status bar there; the mockup
   has no OS layer to draw one, so the cutout sat over bare page
   background and read as unfinished.

   Everything below is measured, not eyeballed. The island's real
   position was read out of images/phone-frame.avif's alpha channel
   and mapped through the iframe's scale transform into its own 390px
   design space:

       island   x 134.3 -> 255.2  (w 120.8, dead centre of 390)
                y  17.1 ->  52.4  (h  35.3, centre 34.5)

   Its 3.43 width:height ratio matches a real Dynamic Island's 3.41,
   which is what confirms the artwork is an Island phone rather than a
   notched one -- so this is laid out as iOS lays out an Island
   status bar: the time centred in the left "ear", the three icons
   right-aligned in the right one, both centred on the island's own
   midline rather than on the safe-area strip's.

   Sizes are real iOS point values used directly as px: the artwork's
   screen is 390 design px against a real 14 Pro's 393pt, so the two
   are 1:1 within a percent. Time 17px semibold; cellular 17x10.67;
   wifi 15.33x11; battery 25x12 body plus a 1.6x4 terminal.

   The glyphs are drawn to match a real 14's, not approximated:
   wifi is the SF Symbols fan -- a dot plus THREE arcs concentric on
   it, not two -- and the battery is a hairline body at 35% with its
   fill inset an even 1px on all four sides (a full charge reads as
   an even gap, not the lopsided one an eyeballed inset gives) and a
   rounded terminal nub, not the teardrop that read as an arrow.

   z-index sits above even the tour's fullscreen screens (2147483002,
   onboarding-tour.js) -- on a real phone the status bar draws over
   app modals too -- and below #looxxBootCover's 2147483647, so the
   first frame still hides behind that like everything else. */
html.looxx-demo-embed {
    --looxx-island-ear: 134px;   /* screen edge -> island, the left ear */
    --looxx-island-mid: 34.5px;  /* island's vertical centre */
}
#looxxStatusBar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Twice the island's midline, so centring inside this box puts
       the row exactly on that midline. */
    height: calc(var(--looxx-island-mid, 29px) * 2);
    z-index: 2147483010;
    pointer-events: none;
    color: #000;
    /* SF Pro where it exists (Apple devices render this identically to
       the real thing), then the Helvetica line, then whatever the
       platform calls sans-serif (Roboto on Android). Deliberately NOT
       Inter, even though this page already loads it: Inter's default
       "1" carries a foot serif, which SF Pro's does not, and at 17px
       that one glyph is what gives a fake status bar away. Every face
       named here draws the bare-stem 1. */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html.looxx-demo-embed #looxxStatusBar { display: block; }

/* iOS 15+ scroll-edge behaviour, and the reason it is not optional
   here: this page's hero card is dark and sits directly under the
   status bar, so the moment it scrolls up, black-on-dark-brown goes
   unreadable. A real app switches status-bar style or lets the bar's
   material take over; this is the material. Covers the safe strip
   only, not the full box above. */
#looxxStatusBar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--looxx-safe-top, 0px);
    background: rgba(250, 248, 246, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    opacity: 0;
    transition: opacity 180ms ease;
}
html.looxx-sb-material #looxxStatusBar::before { opacity: 1; }

/* The tutorial dims the whole screen behind its spotlight (see
   .looxx-tour-hole's 2000px shadow in onboarding-tour.js), and this
   bar sits above that dim -- so black content would go unreadable for
   the length of the tour. Flip to light content, which is exactly what
   a real app does via preferredStatusBarStyle when it darkens the UI.
   The scroll material has to go with it, or it would paint a bright
   strip across the top of a dimmed screen.
   Qualified with :not(:has(.looxx-welcome)) because a fullscreen demo
   screen outranks the dim (z-index 2147483002 vs the curtain's
   2147483000) -- so when one of those cream panels is up, the screen
   is NOT dark and light content would be the unreadable one. */
html:has(.looxx-tour-curtain):not(:has(.looxx-welcome)) #looxxStatusBar { color: #fff; }
html:has(.looxx-tour-curtain):not(:has(.looxx-welcome)) #looxxStatusBar::before { opacity: 0; }

.looxx-sb__time {
    position: absolute;
    left: 0;
    width: var(--looxx-island-ear, 134px);
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
}
.looxx-sb__icons {
    position: absolute;
    /* The mirror image of .looxx-sb__time: centred in the right ear the
       same way the time is centred in the left one. A real device
       right-aligns these on a 15pt inset instead, but next to a centred
       time that left the cluster jammed against the bezel with a wide
       gap to the island -- lopsided in a mockup, where the bar is looked
       at rather than read. The island is centred, so the right ear is
       the same width as the left. */
    right: 0;
    width: var(--looxx-island-ear, 134px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.looxx-sb__icons svg { display: block; }

@media (prefers-reduced-motion: reduce) {
    #looxxStatusBar::before { transition: none; }
}

/* ================================================================
   Safe areas for the app's fullscreen screens
   ================================================================
   The app's welcome, tour and toast styles (onboarding-tour.js) inset
   themselves with env(safe-area-inset-*), which is always 0 inside an
   iframe. In the mockup that put the front door's falling items under
   the fake status bar and the buttons on the home indicator. The same
   59px / 34px the <head> script sets for looxx-mobile.css, applied here.
   Higher specificity than the injected rules, so order does not matter. */
html.looxx-demo-embed .looxx-welcome {
    padding-top: calc(var(--looxx-safe-top, 0px) + 16px);
    padding-bottom: calc(var(--looxx-safe-bottom, 0px) + 16px);
}
html.looxx-demo-embed .looxx-welcome.looxx-welcome--photo {
    padding: 0;
}
html.looxx-demo-embed .looxx-welcome__photo::before {
    height: calc(var(--looxx-safe-top, 0px) + 56px);
}
html.looxx-demo-embed .looxx-welcome--photo .looxx-welcome__inner {
    padding-bottom: calc(var(--looxx-safe-bottom, 0px) + 18px);
}
html.looxx-demo-embed .looxx-tour-toast {
    bottom: calc(104px + var(--looxx-safe-bottom, 0px));
}