/*
 * Product-art frames: the one owner of the browser window, phone bezel and
 * gradient tile drawn around plain screenshots (help redesign D3,
 * 2026-10-25). Loaded by the help pages and My Account (header.php
 * $path_rules); AppFramesOwnershipTest fails if these rules or their colours
 * appear in any other stylesheet. Same look as the App Store listing and
 * the launch email (fmo3-ios fastlane/screenshots/source/build.sh).
 *
 *   <div class="app-tile">
 *     <div class="app-window" data-url="mapwise.com/fmo2/"><picture>...</picture></div>
 *   </div>
 *   <div class="app-tile"><div class="app-phones">
 *     <div class="app-phone"><img ...></div><div class="app-phone"><img ...></div>
 *   </div></div>
 */

.app-tile {
    display: flex;
    flex-direction: column;
    background: linear-gradient(#ffffff, #d7e8f4);
    padding: 12px 12px 0;
    overflow: hidden;
    border-radius: 12px;
}

/* A window always reaches the tile's bottom edge: it grows to fill a tile
   taller than the capture (the 96x72 phone thumbnails) and shrinks into a
   shorter one, where the screenshot crops at the bottom (object-fit below). */
.app-tile > .app-window {
    flex: 1 1 auto;
    min-height: 0;
}

/* Browser window: a dark bar with the three window dots and the product's
   real URL, drawn by pseudo-elements so the screenshot stays a plain image. */
.app-window {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 26px;
    background: #2a2f3a;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(11, 30, 79, 0.22);
}

.app-window::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    background:
        radial-gradient(circle at 12px 13px, #ff5f57 4px, transparent 4.5px),
        radial-gradient(circle at 26px 13px, #febc2e 4px, transparent 4.5px),
        radial-gradient(circle at 40px 13px, #28c840 4px, transparent 4.5px),
        #2a2f3a;
}

.app-window::after {
    content: attr(data-url) / "";
    position: absolute;
    top: 5px;
    left: 56px;
    right: 16px;
    max-width: 260px;
    margin: 0 auto;
    height: 16px;
    padding: 0 10px;
    border-radius: 8px;
    background: #3a4150;
    color: #c9ced8;
    font: 500 10px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-window picture {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
}

.app-window picture img,
.app-window > img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Phone: the flat generic bezel the App Store listing uses (not Apple product
   art), in the proportions of fmo3-ios fastlane/screenshots/source/frame.sh:
   a 16px bezel and a 150px screen radius on a 1140px screen, so 1.4% and
   13.2% of the phone's width at any size. The phone is its own size
   container, so cqw resolves against its width.
   The bezel is a border on the screenshot itself with outer corners of
   14.6% (radius plus bezel), so the outer curve follows the screen's at any
   height (Ethan, 2026-10-26: a separately rounded wrapper flattened a short
   crop's corners and thickened the bezel at full screens' bottom corners). */
.app-phone {
    container-type: inline-size;
}

.app-phone picture {
    display: block;
}

/* (0,1,2): beats page rules such as help.css's .help-content img and
   img.help-shot, which load later at (0,1,1). */
.app-phone picture img,
.app-phone > img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border: 1.4cqw solid #1c1c1e;
    border-radius: 14.6cqw;
    background: #1c1c1e;
    box-shadow: 0 12px 28px rgba(11, 30, 79, 0.3);
}

/* The top of a phone, for a screenshot that is not a full screen (the
   paywall sheet's top): the bezel runs down the sides and the phone fades out
   at the bottom, so it reads as a deliberate crop rather than a phone cut in
   half (Ethan, 2026-10-26). */
.app-phone--top {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.app-phone--top picture img,
.app-phone--top > img {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

/* Two phones side by side, level, 20px apart, sharing the width equally
   (Ethan, 2026-10-26: the canvas's 12px stagger read as a mistake inside a
   contained card). Always the full width of its container: each phone sizes
   from its own width (container-type), so a pair that shrinks to its content
   (a flex item centred with auto margins) would collapse to 0px. */
.app-phones {
    width: 100%;
    display: flex;
    /* Each phone keeps its own height (no stretching to the row). */
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.app-phones .app-phone {
    flex: 1 1 0;
}

/* Narrower phones, for a short tile (the hub's app card art). */
.app-phones--narrow {
    gap: 12px;
}

.app-phones--narrow .app-phone {
    flex: 0 0 38%;
}

/* Compact frames: a tile marked .app-tile--compact-sm draws a slimmer window
   bar (no URL pill) under 768px, where it shrinks to a thumbnail (the hub's
   app rows on phones). Phones need no override: their bezel scales. */
@media (max-width: 767.98px) {
    .app-tile--compact-sm .app-window {
        padding-top: 10px;
    }

    .app-tile--compact-sm .app-window::before {
        height: 10px;
        background:
            radial-gradient(circle at 6px 5px, #ff5f57 2px, transparent 2.5px),
            radial-gradient(circle at 12px 5px, #febc2e 2px, transparent 2.5px),
            radial-gradient(circle at 18px 5px, #28c840 2px, transparent 2.5px),
            #2a2f3a;
    }

    .app-tile--compact-sm .app-window::after {
        display: none;
    }

}

/* One phone where the tile is narrow, measured on the tile itself rather than
   the window (Ethan, 2026-10-26: on a laptop both phones squeezed into My
   Account's stacked app stripe). The query reads the tile's content box: 82px
   in the stacked stripe (one phone), 114px in the compact one (both). */
.app-tile:has(> .app-phones--single-sm) {
    container: app-tile / inline-size;
}

@container app-tile (max-width: 99.98px) {
    .app-phones--single-sm .app-phone + .app-phone {
        display: none;
    }

    .app-phones--single-sm .app-phone {
        flex: 0 0 78px;
    }
}

/* Edge to edge: a tile marked .app-tile--bleed drops its margin so the window
   fills it (the hub's web-app cards at every width; Ethan, 2026-10-26,
   amending D3's 12px inset). (0,2,0): outranks page rules that pad the tile,
   such as help.css's .help-app-art, which loads later. */
.app-tile.app-tile--bleed {
    padding: 0;
}

.app-tile.app-tile--bleed > .app-window {
    border-radius: 0;
    box-shadow: none;
}