/* Mobile welcome / login (components/welcome/welcome.py, the `else: # mobile` branch), 2026-10-02.
   Scoped to #mobile_view.wl-m and its direct children: after the login the same #mobile_view holds the mobile shell
   (#mb_root, its own styles), which none of these rules touch. */
#mobile_view.wl-m {
    width: 100vw; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* the ring: the 800x600 gif, centred on its ring (centre at 49.95% / 49.4% of the image, measured on the gif), cropped to the screen */
#mobile_view > .wl-m-ring {
    position: relative; width: 100vw; height: 78vw; max-height: 46vh; overflow: hidden; margin-top: 1vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
#mobile_view > .wl-m-ring #do_not_enter {
    position: absolute; width: 190vw; height: 142.5vw; max-width: none;
    left: calc(50% - 0.4995 * 190vw); top: calc(50% - 0.494 * 142.5vw);
}

/* login form */
#mobile_view > .wl-m-form { display: flex; flex-direction: column; gap: 10px; margin: 0 6vw; }
#mobile_view .wl-m-in {
    width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border-radius: 12px;
    font: 16px/1.2 'Segoe UI', system-ui, -apple-system, sans-serif;          /* 16px: no zoom on iOS */
    color: #e8e8e8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); outline: none;
}
#mobile_view .wl-m-in::placeholder { color: #8195aa; }
#mobile_view .wl-m-in:focus { border-color: rgba(102, 230, 247, .7); box-shadow: 0 0 0 3px rgba(102, 230, 247, .15); }
#mobile_view .wl-m-btn {
    height: 48px; border-radius: 12px; font: 600 16px/1 'Segoe UI', system-ui, -apple-system, sans-serif; cursor: pointer;
    color: #fff; background: linear-gradient(180deg, #3557b8, #2249a2); border: 1px solid rgba(120, 150, 255, .45);
    box-shadow: 0 6px 18px rgba(34, 73, 162, .35);
}
#mobile_view .wl-m-btn:active { transform: translateY(1px); }

/* tablets (600-900 px: still the mobile layout) - a narrower column */
@media (min-width: 600px) {
    #mobile_view > .wl-m-form, #mobile_view > .wl-m-videos { max-width: 520px; margin-left: auto; margin-right: auto; }
    #mobile_view > .wl-m-ring { height: 62vw; }
}

/* video gallery */
#mobile_view > .wl-m-videos { margin: 4vh 6vw 0; }
#mobile_view .wl-m-h { margin: 0 0 10px; font: 400 1.25rem/1.2 'Oxanium', 'Segoe UI', system-ui, sans-serif; color: #cfefff; }
#mobile_view .wl-m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#mobile_view .wl-m-chip-in { position: absolute; opacity: 0; pointer-events: none; }
#mobile_view .wl-m-chip {
    display: inline-flex !important; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; cursor: pointer;
    font-size: .9rem; color: #cfd8e3; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
#mobile_view .wl-m-chip:has(.wl-m-chip-in:checked) { color: #0b1020; background: #66e6f7; border-color: #66e6f7; }
#mobile_view #videos_container_mobile { margin-top: 12px; }
#mobile_view .wl-m-video { display: block; width: 100%; max-height: 42vh; border-radius: 12px; background: #000;
                           border: 1px solid rgba(255, 255, 255, .1); }