/*
 * SHIFT Design System — Shared Layout V1
 * Reference: approved native_detail.html.
 * Only migrated pages with body.shift-ui.
 */

body.shift-ui .page-shell {
    display: block;
    width: 100%;
    min-height: 100vh;
    padding: 0;
}

body.shift-ui .main-content {
    box-sizing: border-box;
    flex: none;
    min-width: 0;
    width: auto;
    margin: 0 24px 0 clamp(335px, 20vw, 365px);
    padding: 72px 0 56px;
}

body.shift-ui .home-menu-zone {
    position: fixed;
    z-index: 75;
    top: 50%;
    left: 18px;
    margin: 0;
    transform: translateY(-50%);
}

/* Desktop mouse menu — native detail reference */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    body.shift-ui .orb-menu {
        width: 150px;
        height: 150px;
        --orb-core-shift-x: -34px;
    }

    body.shift-ui .orb-menu__toggle {
        width: 92px;
        height: 92px;
    }

    body.shift-ui .orb-menu__branch {
        left: -52px;
        width: 258px;
        height: min(570px, 68vh);
    }

    body.shift-ui .orb-menu__panel {
        left: 74px;
        width: 232px;
        gap: 5px;
        padding: 12px 0 12px 46px;
    }

    body.shift-ui .orb-menu__item {
        width: 198px;
        min-height: 36px;
    }

    body.shift-ui .orb-menu__item-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    body.shift-ui .orb-menu__item-icon svg {
        width: 16px;
        height: 16px;
    }

    body.shift-ui .orb-menu__item-body {
        min-height: 36px;
        padding: 0 10px 0 13px;
    }

    body.shift-ui .orb-menu__text {
        font-size: 10.5px;
    }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    body.shift-ui .main-content {
        margin-left: clamp(330px, 19vw, 360px);
        padding: 72px 0 56px;
    }
}

/* Approved wide desktop composition */
@media (min-width: 1401px) and (hover: hover) and (pointer: fine) {
    body.shift-ui .main-content {
        margin-left: calc(clamp(330px, calc(100vw - 1310px), 455px) + 26px);
        margin-right: 24px;
    }

    body.shift-ui .home-menu-zone {
        transform-origin: left center;
        transform: translateY(-50%) scale(1.12);
    }

    body.shift-ui .orb-menu__branch {
        left: -58px;
        width: 278px;
        height: min(600px, 70vh);
    }

    body.shift-ui .orb-menu__panel {
        left: 82px;
        width: 248px;
        gap: 6px;
        padding: 14px 0 14px 50px;
    }

    body.shift-ui .orb-menu__item {
        width: 214px;
        min-height: 39px;
    }

    body.shift-ui .orb-menu__item-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    body.shift-ui .orb-menu__item-icon svg {
        width: 17px;
        height: 17px;
    }

    body.shift-ui .orb-menu__item-body {
        min-height: 39px;
        padding: 0 12px 0 14px;
    }
}

/* Responsive content */
@media (max-width: 1199px) {
    body.shift-ui .main-content {
        width: min(calc(100% - 36px), 960px);
        margin: 0 auto;
        padding: 108px 0 48px;
    }
}

/* Touch tablets */
@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    body.shift-ui .home-menu-zone {
        position: fixed;
        top: clamp(14px, 2.2dvh, 22px);
        left: clamp(14px, 2vw, 22px);
        transform: none;
        transition: top 320ms ease, transform 320ms ease;
    }

    body.shift-ui .orb-menu {
        width: clamp(72px, 8vw, 88px);
        height: clamp(72px, 8vw, 88px);
        --orb-core-shift-x: 0px;
    }

    body.shift-ui .orb-menu__toggle {
        width: clamp(60px, 6.8vw, 74px);
        height: clamp(60px, 6.8vw, 74px);
    }

    body.shift-ui .orb-menu__icon {
        font-size: clamp(20px, 2.3vw, 24px);
    }

    body.shift-ui .orb-menu__label {
        font-size: clamp(9px, 1.1vw, 11px);
    }

    body.shift-ui .main-content {
        padding-top: clamp(118px, 13dvh, 145px);
    }

    body.shift-ui.home-mobile-menu-open .home-menu-zone {
        top: 50dvh;
        transform: translateY(-50%);
    }
}

/* Smartphones */
@media (max-width: 767px) {
    body.shift-ui .home-menu-zone {
        top: 18px;
        left: 12px;
        transform: none;
    }

    body.shift-ui .orb-menu {
        --orb-core-shift-x: 0px;
        width: 50px;
        height: 50px;
    }

    body.shift-ui .orb-menu__toggle {
        width: 42px;
        height: 42px;
    }

    body.shift-ui .orb-menu__icon {
        font-size: 15px;
    }

    body.shift-ui .orb-menu__label {
        font-size: 8px;
    }

    body.shift-ui .orb-menu__text {
        font-size: 11px;
    }

    body.shift-ui .main-content {
        width: calc(100% - 28px);
        padding: 92px 0 48px;
    }
}

/* Hide content while the touch menu is expanded */
@media (max-width: 767px), (pointer: coarse) {
    body.shift-ui.home-mobile-menu-open {
        overflow: hidden;
    }

    body.shift-ui .main-content {
        transition: opacity 240ms ease, filter 240ms ease;
    }

    body.shift-ui.home-mobile-menu-open .main-content {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        filter: blur(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.shift-ui .main-content,
    body.shift-ui .home-menu-zone {
        transition-duration: 0.01ms !important;
    }
}
/* SHIFT FULL-WIDTH CONTENT V1 */
/* Removes legacy content width limits on migrated pages only. */
body.shift-ui .main-content > .content-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}