/* min-height: the body's gradient is sized to this element, so it must fill the viewport on short pages. */
html {
    overflow-y: scroll;
    min-height: 100%;
}

/* Safari 26 tints its bars with body's background-color, so the gradient must start with it. */
body {
    background: #fff linear-gradient(#fff, #efefef 100vh) no-repeat;
}

/* The icon is opaque white, so it needs a shadow to stand out against the white top of the page.
   box-shadow, not filter: drop-shadow - Safari clips the filter to the image box, leaving it only in the corners.
   border-radius matches the rounded corners baked into logo.png (about 64px of 384px). */
.app-icon {
    border-radius: 17%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

img {
    -webkit-user-select: none !important;
    user-select: none !important;
}

.navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ratio-preview {
    display: block;
    --bs-aspect-ratio: calc(1898 / 930 * 100%); /* preview-iphone-*.webp */
}

@media (min-width: 576px) {
    .ratio-preview {
        --bs-aspect-ratio: calc(2084 / 2600 * 100%); /* preview-*.webp */
    }
}