/* J. Louis - Ngee Ann Polytechnic tour-owned styling preserves the reviewed 2018 interface language. */

:root {
    --hs-nav-tooltip-bg: rgba(0, 0, 0, 0.75);
    --hs-nav-tooltip-color: #fff;
    --hs-nav-tooltip-font-size: 1.5rem;
    --hs-nav-tooltip-radius: 2rem;
    --hs-nav-ring-color: #fff;
    --hs-nav-ring-border-width: 0.4rem;
    --hs-nav-ring-radius: 0;
    --hs-nav-ring-opacity: 1;
    --hs-nav-ring-opacity-hover: 1;
    /* J. Louis - Reuse the default expanding thumbnail border with square geometry. */
    --hs-nav-thumb-border-color: #fff;
    --hs-nav-thumb-border-width: 0.2rem;
    --hs-nav-thumb-radius: 0;
    --hs-nav-thumb-shadow: none;
    --hs-nav-thumb-hover-scale: 1.43;
    --hs-nav-thumb-img-hover-scale: 1;
    --hs-nav-thumb-img-blur: 0;
}

body {
    --primary-color: #296ff3;
    --primary-color-rgb: 41, 111, 243;
    --secondary-color: #000;
    --secondary-color-rgb: 0, 0, 0;
    --menu-width: 22.8rem;
    --logo-height: 7.5rem;
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: 0;
    --glass-shadow: none;
    --glass-blur: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* J. Louis - Lower the desktop dot-menu tooltip slightly toward its dot row. */
dots-menu my-tooltip {
    bottom: 4rem;
}

/* J. Louis - Match the bottom-right controls with black glyphs on the shared pale button surface. */
section[btns][common] my-btn svg path,
section[btns][common] my-btn svg rect,
section[btns][common] my-btn svg circle {
    fill: #000;
}

/* J. Louis - Keep the source desktop logo and fly-out menu at their original screen coordinates. */
aside {
    width: 22.8rem;
    max-height: calc(100dvh - 2.8rem);
    margin: 1.4rem 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    left: 0;
    z-index: 20;
}

/* J. Louis - Fully clear the unused shared aside artwork so browsers never request its legacy asset. */
aside::before {
    display: none !important;
    background-image: none !important;
}
aside > my-btn.close,
aside > my-btn.open { display: none !important; }

aside section[logo] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 22.8rem;
    height: 7.5rem;
    margin: 0 0 3.5rem;
    padding: 0;
    background: transparent;
}

aside section[logo] img {
    width: 22.8rem;
    height: 7.5rem;
    object-fit: contain;
    transform: none;
}

aside nav,
aside section[menu],
aside section[menu] #sa_menu,
aside .np-source-menu--desktop {
    width: 22.8rem;
}

aside nav,
aside section[menu],
aside section[menu] #sa_menu {
    margin: 0;
    overflow: visible;
}

aside section[menu] #sa_menu {
    max-height: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}

aside section[menu] scroll-bar { display: none; }
aside section[menu] #sa_menu > acc-menu { display: none !important; }

.np-source-menu,
.np-source-menu * {
    box-sizing: border-box;
}

.np-source-menu button {
    appearance: none;
    border-radius: 0;
    font: 1.4rem/1 Tahoma, Arial, sans-serif;
    cursor: pointer;
}

.np-source-menu--desktop {
    position: relative;
    display: block !important;
    width: 14rem !important;
    flex: 0 0 14rem;
    overflow: visible;
    isolation: isolate;
}

.np-source-menu__direct,
.np-source-menu__group-button {
    display: block;
    width: 14rem;
    height: 5rem;
    margin: 0 0 0.2rem;
    padding: 0;
    background-position: 1.6rem center;
    background-repeat: no-repeat;
    color: transparent;
    font-size: 0;
    text-align: left;
}

.np-source-menu__direct {
    border: 0;
    background-color: #296ff3;
}

/* J. Louis - Keep Explore as the blue entry row while its destinations open as one group. */
.np-source-menu [data-section="explore"] > .np-source-menu__group-button { background-image: url("media/menu/explore.png"); }
.np-source-menu [data-section="study"] > .np-source-menu__group-button { background-image: url("media/menu/study.png"); }
.np-source-menu [data-section="play"] > .np-source-menu__group-button { background-image: url("media/menu/play.png"); }
.np-source-menu [data-section="eat"] > .np-source-menu__group-button { background-image: url("media/menu/eat.png"); }
.np-source-menu [data-section="chill"] > .np-source-menu__group-button { background-image: url("media/menu/chill.png"); }

/* J. Louis - Scale the source label artwork with the global rem clamp. */
.np-source-menu [data-section="explore"] > .np-source-menu__group-button { background-size: 9.8rem 1.7rem; }
.np-source-menu [data-section="study"] > .np-source-menu__group-button { background-size: 8.2rem 1.9rem; }
.np-source-menu [data-section="play"] > .np-source-menu__group-button { background-size: 6.9rem 2.1rem; }
.np-source-menu [data-section="eat"] > .np-source-menu__group-button { background-size: 5.7rem 2rem; }
.np-source-menu [data-section="chill"] > .np-source-menu__group-button { background-size: 7.6rem 1.8rem; }

.np-source-menu--desktop .np-source-menu__group {
    position: relative;
    width: 14rem;
    height: 5.2rem;
    z-index: 1;
}

.np-source-menu--desktop .np-source-menu__group:hover,
.np-source-menu--desktop .np-source-menu__group:focus-within {
    z-index: 100;
}

.np-source-menu--desktop .np-source-menu__group-button {
    position: relative;
    width: 11.9rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    transition: width .2s, background-color .2s;
}

.np-source-menu--desktop [data-section="explore"] > .np-source-menu__group-button {
    width: 14rem;
    border: 0;
    background-color: #296ff3;
}

.np-source-menu--desktop .np-source-menu__group-button::before,
.np-source-menu--desktop .np-source-menu__scene::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background: #296ff3;
    opacity: 0;
    transition: opacity .1s;
}

.np-source-menu--desktop .np-source-menu__group-button::after,
.np-source-menu--desktop .np-source-menu__entry.has-children > .np-source-menu__scene::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 0.2rem solid #fff;
    border-right: 0.2rem solid #fff;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity .15s;
}

.np-source-menu--desktop .np-source-menu__group:hover > .np-source-menu__group-button,
.np-source-menu--desktop .np-source-menu__group:focus-within > .np-source-menu__group-button {
    width: 14rem;
    background-color: rgba(0, 0, 0, 0.82);
    border-color: transparent;
}

.np-source-menu--desktop .np-source-menu__group:hover > .np-source-menu__group-button::before,
.np-source-menu--desktop .np-source-menu__group:hover > .np-source-menu__group-button::after,
.np-source-menu--desktop .np-source-menu__group:focus-within > .np-source-menu__group-button::before,
.np-source-menu--desktop .np-source-menu__group:focus-within > .np-source-menu__group-button::after {
    opacity: 1;
}

.np-source-menu--desktop .np-source-menu__tier-two,
.np-source-menu--desktop .np-source-menu__tier-three {
    position: absolute;
    top: 0;
    left: 14.1rem;
    width: max-content;
    min-width: 10rem;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    transition: opacity .2s, visibility 0s linear .2s;
}

.np-source-menu--desktop .np-source-menu__group:hover > .np-source-menu__tier-two,
.np-source-menu--desktop .np-source-menu__group:focus-within > .np-source-menu__tier-two,
.np-source-menu--desktop .np-source-menu__entry.has-children:hover > .np-source-menu__tier-three,
.np-source-menu--desktop .np-source-menu__entry.has-children:focus-within > .np-source-menu__tier-three {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* J. Louis - Fold a selected desktop flyout closed while the pointer remains over its former item. */
.np-source-menu--desktop .np-source-menu__group.is-navigation-closing > .np-source-menu__tier-two {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, visibility 0s linear .2s;
}

.np-source-menu--desktop .np-source-menu__group.is-navigation-closing > .np-source-menu__group-button {
    width: 11.9rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
}

.np-source-menu--desktop .np-source-menu__group.is-navigation-closing > .np-source-menu__group-button::before,
.np-source-menu--desktop .np-source-menu__group.is-navigation-closing > .np-source-menu__group-button::after {
    opacity: 0;
}

.np-source-menu--desktop [data-section="explore"].is-navigation-closing > .np-source-menu__group-button {
    width: 14rem;
    border: 0;
    background-color: #296ff3;
}

.np-source-menu--desktop .np-source-menu__entry {
    position: relative;
    width: 100%;
    height: 5rem;
    z-index: 1;
}

.np-source-menu--desktop .np-source-menu__entry:hover,
.np-source-menu--desktop .np-source-menu__entry:focus-within {
    z-index: 20;
}

.np-source-menu--desktop .np-source-menu__tier-three {
    left: calc(100% + 0.1rem);
    z-index: 30;
}

.np-source-menu--desktop .np-source-menu__scene {
    position: relative;
    display: block;
    width: 100%;
    min-width: max-content;
    height: 5rem;
    /* J. Louis - Match the Panotour text inset and measured flyout widths. */
    padding: 0 3.2rem 0 2.2rem;
    border: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    white-space: nowrap;
    text-align: left;
    transition: background-color .2s;
}

.np-source-menu--desktop .np-source-menu__scene:hover,
.np-source-menu--desktop .np-source-menu__scene:focus {
    background: #000;
    outline: 0;
}

.np-source-menu--desktop .np-source-menu__scene:hover::before,
.np-source-menu--desktop .np-source-menu__scene:focus::before,
.np-source-menu--desktop .np-source-menu__entry.has-children:hover > .np-source-menu__scene::after,
.np-source-menu--desktop .np-source-menu__entry.has-children:focus-within > .np-source-menu__scene::after {
    opacity: 1;
}

.np-source-menu-mobile-toggle,
.np-source-menu-mobile-overlay {
    display: none;
}

/* J. Louis - Match the source square spots: 7rem resting frame, 10rem hover thumbnail, uppercase pill label. */
hs-navigation .ring-big {
    animation: none;
    /* J. Louis - Keep contrast outside the resting white frame so its interior stays clean. */
    outline: 0.1rem solid rgba(0, 0, 0, 0.35);
    outline-offset: 0;
}

/* J. Louis - Add a restrained SUTD-style square pulse outside the permanent white frame. */
hs-navigation::before {
    content: '';
    position: absolute;
    inset: -0.3rem;
    box-sizing: border-box;
    border: 0.1rem solid rgba(255, 255, 255, 0.8);
    pointer-events: none;
    animation: ngee-nav-square-pulse 2s ease-out infinite;
}

hs-navigation:hover::before,
hs-navigation.open::before {
    display: none;
}

@keyframes ngee-nav-square-pulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

/* J. Louis - Carry the same outside-only edge onto every expanded square. */
hs-navigation:hover .thumb,
hs-navigation.open .thumb {
    outline: 0.1rem solid rgba(0, 0, 0, 0.35);
    outline-offset: 0;
}

/* J. Louis - Let the expanding square replace the resting frame instead of leaving an inner border. */
hs-navigation:hover .ring-big,
hs-navigation.open .ring-big {
    opacity: 0;
}

hs-navigation .thumb::after { display: none; }

hs-navigation hs-navigation-title {
    bottom: auto;
    top: 100%;
    text-transform: uppercase;
    font-family: Monaco, Consolas, monospace;
    font-weight: 600;
    transform: translate(-50%, 1.4rem) scale(0);
}

/* J. Louis - Flip the shared tooltip caret upward for labels positioned below the square waypoint. */
hs-navigation hs-navigation-title::before {
    display: block;
    top: auto;
    bottom: calc(100% - 0.1rem);
    border-width: 0 0.7rem 1rem;
    border-color: transparent transparent var(--hs-nav-tooltip-bg) transparent;
}

hs-navigation:hover hs-navigation-title,
hs-navigation.open hs-navigation-title {
    transform: translate(-50%, 3rem) scale(1);
}

hs-navigation:has(.icon:not(:empty)) .ring-big,
hs-navigation:has(.icon:not(:empty)) .thumb {
    display: none;
}

hs-navigation:has(.icon:not(:empty)) .icon {
    overflow: visible;
}

/* J. Louis - Keep the rounded open card while the standalone scene title remains completely unboxed. */
section[description] { width: min(50rem, calc(100vw - 2rem)); }

my-description {
    border-radius: var(--border-radius);
    background: transparent;
    color: #222;
}

body.descr my-description { background: rgba(255, 255, 255, 0.82); }

my-description::before,
my-description div.title-stage,
body.descr my-description div.title-stage {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-align: left;
}

my-description my-description-text {
    color: #222;
    font: 1.4rem/1.45 Arial, Helvetica, sans-serif;
}

/* J. Louis - Match the original krpano gate: live aerial view, 80% black overlay, and retained splash artwork. */
#splash_screen {
    background: transparent;
    backdrop-filter: none;
}
#splash_screen .splash_overlay { background: rgba(0, 0, 0, 0.8); }
body.splash #pano hs-navigation { visibility: hidden; }
#splash_screen .splash-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}
#splash_screen > .splash-entry:not(.splash_overlay):not(#splash_spinner) img {
    width: min(40.6rem, 72vw);
    height: auto;
}
#splash_screen > .splash-entry:not(.splash_overlay):not(#splash_spinner) button.enter {
    width: min(35rem, 72vw);
    height: 6.6rem;
    margin: 0;
    padding: 0 2rem;
    border: 0.4rem solid #fff;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    font: 2.6rem/1 Arial, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
}
#splash_screen > .splash-entry:not(.splash_overlay):not(#splash_spinner) button.enter:hover,
#splash_screen > .splash-entry:not(.splash_overlay):not(#splash_spinner) button.enter:focus {
    background: rgba(255, 255, 255, 0.72);
}

@media (hover: none), (max-width: 48rem) {
    /* J. Louis - Match the source mobile full-screen slide-in menu and blue three-line trigger. */
    section[ui] > aside { display: none !important; }

    .np-source-menu-mobile-toggle {
        position: fixed;
        top: 0;
        right: 0;
        /* J. Louis - Override the UI shell while allowing the source drawer to cover this opener. */
        z-index: 1400;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 5rem;
        height: 5rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.7);
        cursor: pointer;
        pointer-events: auto;
    }

    .np-source-menu-mobile-toggle span {
        width: 2.5rem;
        height: 0.2rem;
        background: #296ff3;
    }

    .np-source-menu-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 1500;
        display: block;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.7);
        opacity: 1;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .3s;
    }

    .np-source-menu-mobile-overlay.is-open {
        pointer-events: auto;
        transform: translateX(0);
    }

    .np-source-menu--mobile {
        position: absolute;
        top: 10rem;
        left: 1.5rem;
        display: flex;
        flex-direction: column;
        width: calc(100% - 3rem);
        height: calc(100% - 11.5rem);
        overflow: hidden;
    }

    .np-source-menu--mobile .np-source-menu__direct {
        width: 100%;
        height: 5rem;
        margin-bottom: 0.2rem;
        border: 0;
        background-color: #296ff3;
    }

    .np-source-menu--mobile .np-source-menu__group {
        display: flex;
        flex: 0 0 5rem;
        flex-direction: column;
        width: 100%;
        min-height: 5rem;
        overflow: hidden;
        /* J. Louis - Reproduce the source's default half-second ease-out row and panel tween. */
        transition: flex-basis .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* J. Louis - Preserve the source's two-unit gap between its blue Explore row and tier-one rows. */
    .np-source-menu--mobile [data-section="explore"] {
        flex-basis: 5.2rem;
    }

    .np-source-menu--mobile .np-source-menu__group.is-open {
        flex-basis: min(
            calc(var(--np-mobile-tier-two-rows) * 5rem),
            calc(100% - 20.2rem)
        );
    }

    .np-source-menu--mobile [data-section="explore"].is-open {
        flex-basis: min(
            calc(var(--np-mobile-tier-two-rows) * 5rem),
            calc(100% - 20rem)
        );
    }

    .np-source-menu--mobile .np-source-menu__group-button {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        height: 4.6rem;
        margin: 0.4rem 0 0;
        border: 0.1rem solid rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.5);
        transition: background-color .3s, border-color .3s;
    }

    /* J. Louis - Retain the source blue Explore row after merging Aerial into that section. */
    .np-source-menu--mobile [data-section="explore"] > .np-source-menu__group-button {
        height: 5rem;
        margin-top: 0;
        border: 0;
        background-color: #296ff3;
    }

    .np-source-menu--mobile .np-source-menu__group.is-open > .np-source-menu__group-button {
        border-color: transparent;
        background-color: rgba(0, 0, 0, 0.8);
        transition-duration: .2s;
    }

    .np-source-menu--mobile .np-source-menu__tier-two {
        display: block;
        flex: 1 1 0;
        min-height: 0;
        margin-top: 0.3rem;
        width: 100%;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s linear .5s;
    }

    .np-source-menu--mobile .np-source-menu__group.is-open > .np-source-menu__tier-two {
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: visible;
        pointer-events: auto;
        touch-action: pan-y;
        transition-delay: 0s;
        -webkit-overflow-scrolling: touch;
    }

    .np-source-menu--mobile .np-source-menu__tier-two * {
        touch-action: pan-y;
    }

    .np-source-menu--mobile .np-source-menu__entry,
    .np-source-menu--mobile .np-source-menu__tier-three {
        position: relative;
        display: block;
        width: 100%;
    }

    .np-source-menu--mobile .np-source-menu__scene {
        position: relative;
        display: block;
        width: 100%;
        height: 5rem;
        padding: 0 3rem 0 2rem;
        border: 0;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        white-space: normal;
        text-align: left;
    }

    .np-source-menu--mobile .np-source-menu__tier-three .np-source-menu__scene {
        width: calc(100% - 2rem);
        margin-left: 2rem;
        background: rgba(17, 17, 17, 0.7);
    }

    .np-source-menu--mobile .np-source-menu__scene.is-active {
        background: #000;
        box-shadow: inset 0 0.2rem #296ff3;
    }

    /* J. Louis - Keep the collapsed mobile scene title transparent and right-aligned. */
    body:not(.descr) my-description {
        background: transparent;
    }

    body:not(.descr) my-description div.title-stage {
        text-align: right;
    }

    /* J. Louis - Mobile uses the panorama waypoints, so only the redundant dot row is suppressed. */
    section[nav_dots] {
        display: none !important;
    }

    /* J. Louis - Keep the mobile group title visible and transparent at the standard top-left position. */
    #group-title {
        background: transparent;
        text-align: left;
    }

    #splash_screen .splash-campus-logo { left: 0.8rem; top: 0.8rem; width: min(20rem, 52vw); height: auto; }
    #bottom-right-cluster { right: 1rem; width: calc(100vw - 2rem); }
    section[description] { width: 100%; }
}