:root, :host {
    --bi-top-chrome-height : env(safe-area-inset-top, 0px);
}

* {
    -webkit-touch-callout: none;
}
    
/* Full-screen layout with the shared example base typography, kept self-contained (no shared chrome). */
html,
body {
    margin              : 0;
    padding             : 0;
    height              : 100dvh;
    overflow            : clip;
    overscroll-behavior : none;
    font-family         : Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* Clear the safe area inset on iOS so the app can use the full screen, but still respect the safe area for content. */
/* The background tracks the active theme's panel color, so the browser/OS chrome matches on theme swap - no JS. */
html {
    margin-top       : env(safe-area-inset-top, 0px);
    background-color : var(--b-panel-background, #fff);
}

body {
    display        : flex;
    flex-direction : column;
}

/* Two-column locale picker rows (name flexed, language code muted), matching the shared harness. */
.b-locale-picker .b-list-item-content {
    div:first-child {
        flex : 1;
    }

    div:last-child {
        color : var(--b-neutral-40);
    }
}