/*
 * Installed PWA shell.
 * Applied only when the site is launched as an installed standalone/fullscreen app.
 * Browser rendering remains owned by the normal responsive stylesheets.
 */

html[data-mm-display-mode="standalone"] {
    min-height: 100%;
    background: #020b18;
    overscroll-behavior-y: none;
}

html[data-mm-display-mode="standalone"] body.mm-body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

html[data-mm-display-mode="standalone"] .mm-main-header {
    top: env(safe-area-inset-top);
}

html[data-mm-display-mode="standalone"] a,
html[data-mm-display-mode="standalone"] button,
html[data-mm-display-mode="standalone"] input,
html[data-mm-display-mode="standalone"] select,
html[data-mm-display-mode="standalone"] textarea {
    touch-action: manipulation;
}

html[data-mm-display-mode="standalone"] .mm-navigation-error {
    bottom: calc(1rem + env(safe-area-inset-bottom));
}

html[data-mm-display-mode="standalone"] .mm-global-player {
    padding-bottom: env(safe-area-inset-bottom);
}

/*
 * The installed app uses the Bootstrap lg threshold rather than the site's
 * narrower 768px phone threshold. On Android, display scaling and logical
 * viewport density can place a real phone in the 768-991px CSS range; the
 * previous rules therefore left the PWA in the site's tablet composition.
 */
@media (max-width: 991.98px) {
    html[data-mm-display-mode="standalone"] {
        font-size: clamp(1rem, calc(.82rem + 1vw), 1.125rem);
        --mm-pwa-touch-target: 3rem;
        --mm-pwa-page-gutter: clamp(.9rem, 3.5vw, 1.15rem);
        --mm-pwa-card-radius: 1.125rem;
    }

    html[data-mm-display-mode="standalone"] body.mm-body {
        background:
            radial-gradient(circle at 50% -8rem, rgba(31, 120, 221, .16), transparent 22rem),
            linear-gradient(180deg, #06111f 0%, #040c17 100%);
        font-size: 1rem;
        line-height: 1.5;
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header {
        --mm-public-header-height: 64px;
        box-shadow: 0 7px 24px rgba(0, 0, 0, .24);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-public-header__navbar,
    html[data-mm-display-mode="standalone"] .mm-app-body.mm-app-body--header-shell {
        --mm-topbar-height: 64px;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-public-header__container {
        min-height: 64px;
        padding-inline: var(--mm-pwa-page-gutter);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .brand-logo--header {
        flex-basis: 172px;
        width: 172px;
        height: 52px;
        margin-right: .5rem;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .brand-logo--header .brand-logo__image {
        width: 156px;
        height: 36px;
        transform: scale(2.35);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-public-header__toggler {
        width: var(--mm-pwa-touch-target);
        height: var(--mm-pwa-touch-target);
        min-width: var(--mm-pwa-touch-target);
        min-height: var(--mm-pwa-touch-target);
        padding: .65rem;
        border-radius: .85rem;
        background: rgba(15, 42, 73, .7);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-public-header__collapse {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 64px);
        right: calc(var(--mm-pwa-page-gutter) + env(safe-area-inset-right));
        left: calc(var(--mm-pwa-page-gutter) + env(safe-area-inset-left));
        max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - .7rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .8rem;
        border: 1px solid rgba(66, 123, 184, .46);
        border-top: 0;
        border-radius: 0 0 1rem 1rem;
        background: linear-gradient(180deg, rgba(5, 18, 35, .99), rgba(3, 13, 27, .995));
        box-shadow: 0 22px 52px rgba(0, 0, 0, .46);
        backdrop-filter: blur(22px) saturate(135%);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .nav-link {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: .72rem .85rem;
        border-radius: .8rem;
        font-size: 1rem;
        line-height: 1.25;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-public-header__account {
        gap: .6rem;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-mastering-bell,
    html[data-mm-display-mode="standalone"] .mm-public-header .mm-user-menu-trigger {
        min-height: var(--mm-pwa-touch-target);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-mastering-bell {
        width: var(--mm-pwa-touch-target);
        height: var(--mm-pwa-touch-target);
        min-width: var(--mm-pwa-touch-target);
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .mm-user-menu-trigger {
        border-radius: .85rem;
        padding-block: .55rem;
        padding-inline: .75rem;
    }

    html[data-mm-display-mode="standalone"] .mm-public-content.container {
        width: 100%;
        max-width: none;
        padding: 1rem var(--mm-pwa-page-gutter) calc(6.4rem + env(safe-area-inset-bottom)) !important;
    }

    html[data-mm-display-mode="standalone"] .mm-app-body--header-shell .mm-main-content {
        min-height: calc(100dvh - 64px);
    }

    html[data-mm-display-mode="standalone"] .mm-app-body--header-shell .mm-page-host,
    html[data-mm-display-mode="standalone"] .mm-app-body .mm-page-host {
        padding: 1rem var(--mm-pwa-page-gutter) !important;
        padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
    }

    html[data-mm-display-mode="standalone"] .mm-app-body .mm-page-shell {
        width: 100%;
    }

    /* Home: force a true phone/app composition instead of the site's tablet grid. */
    html[data-mm-display-mode="standalone"] .mm-home-mastering {
        width: 100%;
        max-width: 46rem;
        margin-inline: auto;
        padding-bottom: 4.5rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-mastering::before {
        inset-inline: -1rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-hero {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        min-height: 0;
        padding: 2.2rem 0 3rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-hero__copy,
    html[data-mm-display-mode="standalone"] .mm-home-demo {
        width: 100%;
        max-width: none;
    }

    html[data-mm-display-mode="standalone"] .mm-home-kicker {
        gap: .5rem;
        font-size: .8rem;
        letter-spacing: .115em;
    }

    html[data-mm-display-mode="standalone"] .mm-home-hero h1 {
        max-width: none;
        margin-top: .85rem;
        font-size: clamp(2.65rem, 8vw, 4rem);
        line-height: .98;
        letter-spacing: -.048em;
    }

    html[data-mm-display-mode="standalone"] .mm-home-hero__lead,
    html[data-mm-display-mode="standalone"] .mm-home-section__lead,
    html[data-mm-display-mode="standalone"] .mm-home-section__header > p,
    html[data-mm-display-mode="standalone"] .mm-home-memory__copy > p,
    html[data-mm-display-mode="standalone"] .mm-home-mixer__copy > p,
    html[data-mm-display-mode="standalone"] .mm-home-verify__copy > p,
    html[data-mm-display-mode="standalone"] .mm-home-final p {
        font-size: 1.03rem;
        line-height: 1.58;
    }

    html[data-mm-display-mode="standalone"] .mm-home-hero__lead {
        margin-top: 1.25rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .8rem;
        width: 100%;
        margin-top: 1.5rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-action {
        width: 100%;
        min-width: 0;
        min-height: 64px;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        padding: .8rem 1rem;
        border-radius: 15px;
    }

    html[data-mm-display-mode="standalone"] .mm-home-action > i {
        width: 2.6rem;
        height: 2.6rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-action strong {
        font-size: 1.05rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-action small {
        font-size: .88rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-guardrails {
        display: grid;
        grid-template-columns: 1fr;
        gap: .7rem;
        margin-top: 1.15rem;
        font-size: .94rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-demo {
        min-height: 0;
        padding: 1rem;
        border-radius: 20px;
    }

    html[data-mm-display-mode="standalone"] .mm-home-demo__topbar {
        font-size: .86rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-demo__wave {
        height: 88px;
        margin-block: .75rem .25rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-dialogue__bubble {
        max-width: 100%;
        padding: .9rem 1rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-dialogue__bubble > span {
        font-size: .78rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-dialogue__bubble p {
        font-size: .98rem;
        line-height: 1.5;
    }

    html[data-mm-display-mode="standalone"] .mm-home-change-preview {
        grid-template-columns: 1fr;
        gap: .6rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-change-preview > div {
        min-height: 0;
        padding: .8rem .9rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-change-preview span,
    html[data-mm-display-mode="standalone"] .mm-home-change-preview small {
        font-size: .8rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-change-preview strong {
        font-size: .98rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-demo__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        font-size: .8rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust,
    html[data-mm-display-mode="standalone"] .mm-home-workflow__steps,
    html[data-mm-display-mode="standalone"] .mm-home-mode-grid,
    html[data-mm-display-mode="standalone"] .mm-home-tool-grid {
        grid-template-columns: 1fr;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust {
        gap: .8rem;
        margin-bottom: 3rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust article,
    html[data-mm-display-mode="standalone"] .mm-home-workflow__steps article,
    html[data-mm-display-mode="standalone"] .mm-home-mode-grid article,
    html[data-mm-display-mode="standalone"] .mm-home-tool-grid article {
        min-height: 0;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust article {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        padding: 1rem;
        border-radius: 17px;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust strong {
        font-size: 1.05rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-trust span {
        font-size: .94rem;
        line-height: 1.5;
    }

    html[data-mm-display-mode="standalone"] .mm-home-section {
        margin-top: 3rem;
        padding: 1.25rem;
        border-radius: 21px;
    }

    html[data-mm-display-mode="standalone"] .mm-home-mastering h2 {
        font-size: clamp(1.9rem, 6vw, 2.6rem);
        line-height: 1.06;
        letter-spacing: -.035em;
    }

    html[data-mm-display-mode="standalone"] .mm-home-mastering h3 {
        font-size: 1.12rem;
        line-height: 1.25;
    }

    html[data-mm-display-mode="standalone"] .mm-home-conversation,
    html[data-mm-display-mode="standalone"] .mm-home-memory,
    html[data-mm-display-mode="standalone"] .mm-home-mixer,
    html[data-mm-display-mode="standalone"] .mm-home-verify,
    html[data-mm-display-mode="standalone"] .mm-home-final {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    html[data-mm-display-mode="standalone"] .mm-home-decision-card,
    html[data-mm-display-mode="standalone"] .mm-home-mixer__console,
    html[data-mm-display-mode="standalone"] .mm-home-memory__visual {
        width: 100%;
        max-width: none;
        transform: none;
    }

    html[data-mm-display-mode="standalone"] .mm-home-workflow__steps p,
    html[data-mm-display-mode="standalone"] .mm-home-mode-grid p,
    html[data-mm-display-mode="standalone"] .mm-home-tool-grid p {
        font-size: .96rem;
        line-height: 1.55;
    }

    html[data-mm-display-mode="standalone"] .mm-page-host p,
    html[data-mm-display-mode="standalone"] .mm-public-content p,
    html[data-mm-display-mode="standalone"] .form-label,
    html[data-mm-display-mode="standalone"] .form-text,
    html[data-mm-display-mode="standalone"] .list-group-item,
    html[data-mm-display-mode="standalone"] .dropdown-item {
        line-height: 1.5;
    }

    html[data-mm-display-mode="standalone"] small,
    html[data-mm-display-mode="standalone"] .small {
        font-size: .875rem;
    }

    html[data-mm-display-mode="standalone"] .card {
        border-radius: var(--mm-pwa-card-radius);
    }

    html[data-mm-display-mode="standalone"] .card-header,
    html[data-mm-display-mode="standalone"] .card-footer {
        padding: .9rem 1rem;
    }

    html[data-mm-display-mode="standalone"] .card-body {
        padding: 1rem;
    }

    html[data-mm-display-mode="standalone"] .btn,
    html[data-mm-display-mode="standalone"] .form-control,
    html[data-mm-display-mode="standalone"] .form-select,
    html[data-mm-display-mode="standalone"] .input-group > .form-control,
    html[data-mm-display-mode="standalone"] .input-group > .form-select {
        min-height: var(--mm-pwa-touch-target);
        font-size: 1rem;
    }

    html[data-mm-display-mode="standalone"] .btn {
        padding: .65rem .9rem;
        border-radius: .78rem;
        line-height: 1.2;
    }

    html[data-mm-display-mode="standalone"] .btn.btn-sm {
        min-height: 2.75rem;
        padding: .5rem .72rem;
        font-size: .9rem;
    }

    html[data-mm-display-mode="standalone"] .form-control,
    html[data-mm-display-mode="standalone"] .form-select {
        padding-block: .62rem;
        border-radius: .75rem;
    }

    html[data-mm-display-mode="standalone"] textarea.form-control {
        min-height: 7rem;
    }

    html[data-mm-display-mode="standalone"] .form-check-input {
        width: 1.2rem;
        height: 1.2rem;
    }

    html[data-mm-display-mode="standalone"] .dropdown-menu {
        padding: .45rem;
        border-radius: .9rem;
    }

    html[data-mm-display-mode="standalone"] .dropdown-item,
    html[data-mm-display-mode="standalone"] .list-group-item-action,
    html[data-mm-display-mode="standalone"] .nav-pills .nav-link,
    html[data-mm-display-mode="standalone"] .nav-tabs .nav-link,
    html[data-mm-display-mode="standalone"] .accordion-button {
        min-height: var(--mm-pwa-touch-target);
        font-size: .95rem;
    }

    html[data-mm-display-mode="standalone"] .dropdown-item {
        display: flex;
        align-items: center;
        padding: .62rem .72rem;
        border-radius: .65rem;
    }

    html[data-mm-display-mode="standalone"] .table {
        font-size: .92rem;
    }

    html[data-mm-display-mode="standalone"] .table > :not(caption) > * > * {
        padding: .72rem .62rem;
        vertical-align: middle;
    }

    html[data-mm-display-mode="standalone"] .modal-dialog {
        margin: var(--mm-pwa-page-gutter);
    }

    html[data-mm-display-mode="standalone"] .modal-content {
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mm-pwa-page-gutter) - var(--mm-pwa-page-gutter));
        border-radius: 1.1rem;
    }

    html[data-mm-display-mode="standalone"] .modal-header,
    html[data-mm-display-mode="standalone"] .modal-footer {
        padding: 1rem;
    }

    html[data-mm-display-mode="standalone"] .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem;
    }

    html[data-mm-display-mode="standalone"] .mm-legal-footer {
        padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 389.98px) {
    html[data-mm-display-mode="standalone"] {
        --mm-pwa-page-gutter: .85rem;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .brand-logo--header {
        flex-basis: 146px;
        width: 146px;
    }

    html[data-mm-display-mode="standalone"] .mm-public-header .brand-logo--header .brand-logo__image {
        width: 134px;
        transform: scale(2.15);
    }
}

@media (max-width: 991.98px) and (any-pointer: coarse) {
    html[data-mm-display-mode="standalone"] .btn,
    html[data-mm-display-mode="standalone"] .btn.btn-sm,
    html[data-mm-display-mode="standalone"] .dropdown-item,
    html[data-mm-display-mode="standalone"] .list-group-item-action,
    html[data-mm-display-mode="standalone"] .nav-link,
    html[data-mm-display-mode="standalone"] button,
    html[data-mm-display-mode="standalone"] select {
        min-height: var(--mm-pwa-touch-target);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-mm-display-mode="standalone"] * {
        scroll-behavior: auto !important;
    }
}
