/* Web version only (linked by web/build.mjs; the iOS app does not load this file).
   Fixes for how desktop browsers draw things the iOS WebView draws differently. */

/* Chrome gives a disabled image button a light gray background: keep the icons on the bar as they are */
input[type="image"],
input[type="image"]:disabled {
    background: transparent;
    border: none;
}

/* The header has a third button on the web (the account, web/src/account.ts): take the space it needs
   from the padding, so the title stays in the middle */
.main .header .right {
    padding-left: 0;
}

/* The account button: the same size as the song list and settings icons beside it (30 × 30) */
#headerAccountButton {
    width: 30px;
    height: 30px;
}

/* No bounce at the page edges (Safari lets the page be pulled up and down and springs back, even on
   screens that do not scroll, like the player). The iOS app has no bounce either. Scrolling where
   there is more to scroll still works (2026-11-09) */
html, body { overscroll-behavior: none; }

/* Phones held upright: the iPhone app is landscape only (iPads may be upright), and a browser cannot
   lock the screen (iPhone Safari ignores the manifest's orientation), so ask to turn the phone.
   The notice is #turnNotice (web/src/install.ts); on an iPhone it also suggests the App Store app */
#turnNotice { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
    #turnNotice {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 32px;
        text-align: center;
        color: #fff;
        background: #2d3748;
    }
}
#turnNotice .turn-notice-title { font-size: 20px; font-weight: 600; }
#turnNotice .turn-notice-app { color: #ccc; font-size: 15px; line-height: 1.5; max-width: 320px; }
#turnNotice .turn-notice-app a { color: #63b3ed; }

/* Added to the home screen on iPhone, the page reaches the edges (black-translucent status bar in
   web/build.mjs, viewport-fit=cover in index.html). No extra side margins for the Dynamic Island:
   the iOS app uses the full width too, and the two should look the same (2026-11-07) */

/* How to add the app to the home screen (phones in the browser, web/src/install.ts).
   Above the "turn your phone" notice, so it can be read either way up */
#installGuide {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
             max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: #2d3748;
    overflow-y: auto;
}
#installGuide .install-guide-box {
    max-width: 520px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    color: #2d3748;
    font-size: 15px;
    line-height: 1.5;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
#installGuide .install-guide-icon { width: 56px; height: 56px; border-radius: 12px; display: block; margin: 0 auto 8px; }
#installGuide .install-guide-title { font-size: 18px; font-weight: 700; text-align: center; }
#installGuide p { margin: 8px 0; }
#installGuide ol { margin: 8px 0; padding-left: 22px; }
#installGuide li { margin: 4px 0; }
#installGuide .install-guide-note { color: #999; font-size: 13px; text-align: center; }
#installGuide .install-guide-note a { color: inherit; }
#installGuide .install-guide-buttons { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
#installGuide .install-guide-continue { background: none; border: none; color: #3B8BBB; font-size: 15px; padding: 8px; cursor: pointer; }

/* The score's vertical spacing uses 100vh, but Android in full screen gives vh (and dvh) smaller than
   the screen, which left a dark band at the bottom. --app-height is the height measured by
   web/src/index.ts (window.innerHeight) */
.spacer {
    height: calc((var(--app-height, 100vh) - var(--music-height) - 120px) / 2);
}

/* Composer page: the portrait arrives over the network, and the page hid its box until then, so the
   text first ran the full width and then jumped right. Keep the box's place while the portrait loads
   (every portrait is 400 x 480, as is the "no known portrait" frame) (2026-11-09) */
#composerPortraitBox[hidden] {
    display: block;
    visibility: hidden;
    aspect-ratio: 400 / 480;
}