/*
=====================================================
AETHER ENTITY VIEW
=====================================================

This file owns dossier composition and entity-specific
layout. Shared screen, content, button, chrome, and
motion rules live in their dedicated global files.

Entity View:

Overview
    bridge between Lens and Aether

Modus
    specialized Aether perception

Preview
    immersive media perception
OVERVIEW RULE

Aether surrounds Lens perception.

The global Aether blur veil arrives before the
interface resolves, matching Aether Menu.


The header and footer also contain localized Aether
vignettes.

These may blur the world directly behind those strips
without affecting the central Lens window.
=====================================================
*/



/*
=====================================================
ENTITY VIEW ROOT
=====================================================
*/


.aether-entity-view {

    z-index:
        100;


    display:
        none;


    overflow:
        hidden;

    color:
        #e7e9f2;


    font-family:
        var(--aether-font-interface);

    outline:
        none;

}

/*
=====================================================
AETHER FIELD / WORLD VEIL
=====================================================

Entity View shares the global Aether blur veil used by
the Aether Menu. Preview may add extra darkness.
=====================================================
*/


.aether-entity-dismiss-surface {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

}


/*
=====================================================
SHELL
=====================================================
*/


.aether-entity-shell {

    z-index:
        1;


    inset:

        clamp(
            22px,
            4vh,
            54px
        )

        clamp(
            24px,
            4vw,
            70px
        );


    display:
        grid;


    grid-template-rows:

        auto

        minmax(
            0,
            1fr
        )

        auto;


    gap:

        clamp(
            18px,
            2.8vh,
            30px
        );


}


/*
=====================================================
TOP HEADER
=====================================================
*/


/*
=====================================================
HEADER TYPE
=====================================================
*/


/*
=====================================================
PRESENTATION STAGE
=====================================================
*/


/*
=====================================================
OVERVIEW COMPOSITION
=====================================================

LEFT
    Modus Index

CENTER
    clear Lens window

RIGHT
    entity identity
    metadata
    Overview context
=====================================================
*/


.aether-entity-main {

    width:
        100%;

    height:
        100%;


    min-width:
        0;

    min-height:
        0;


    display:
        grid;


    grid-template-columns:

        minmax(
            150px,
            0.62fr
        )

        minmax(
            360px,
            2.35fr
        )

        minmax(
            270px,
            0.95fr
        );


    gap:

        clamp(
            22px,
            3vw,
            54px
        );

}


.aether-entity-main[hidden] {

    display:
        none;

}



/*
=====================================================
MODUS INDEX
=====================================================
*/


.aether-entity-navigation {

    align-self:
        center;


    min-width:
        0;


    padding:

        8px
        0;


    box-sizing:
        border-box;


}


.aether-entity-navigation-label {

    padding:
        0 0 0 18px;

    margin-bottom:
        12px;


    opacity:
        0.35;

}


.aether-entity-navigation-layout {

    width:
        100%;

}


.aether-entity-navigation-level {

    --aether-index-level-width:
        100%;

    width:
        100%;

}


.aether-entity-navigation-list {

    position:
        relative;

    display:
        flex;


    flex-direction:
        column;


    gap:
        6px;

}


/*
=====================================================
CENTER — LENS WINDOW
=====================================================
*/


.aether-entity-subject {

    min-width:
        0;

    min-height:
        0;


    position:
        relative;


    pointer-events:
        none;

}


/* Entity View owns placement only. Portrait background,
content, and glitch insets come from AetherSurfaces. */


.aether-entity-portrait-slot {

    display:
        none;

}


.aether-entity-view.is-open
.aether-entity-portrait-slot {

    display:
        grid;

    position:
        fixed;

    inset:
        auto;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);

    width:
        min(34vw, 430px);

    height:
        min(54vh, 560px);

    place-items:
        center;

    pointer-events:
        none;

    isolation:
        isolate;

}


/*
=====================================================
RIGHT — AETHER KNOWLEDGE
=====================================================
*/


.aether-entity-overview-right {

    align-self:
        center;


    min-width:
        0;

    min-height:
        0;


    max-height:
        100%;


    display:
        grid;


    box-sizing:
        border-box;


    overflow:
        visible;

}


.aether-entity-overview-right
.aether-info-surface-content {

    display:
        grid;

    gap:
        0;

    overflow:
        auto;


    scrollbar-width:
        thin;

}



/*
=====================================================
IDENTITY
=====================================================
*/


.aether-entity-identity {

    min-width:
        0;


    padding-bottom:
        clamp(
            12px,
            1.6vh,
            18px
        );

}


.aether-entity-title {

    margin:
        0;


    color:
        #ffffff;


    font-size:

        clamp(
            19px,
            2.1vw,
            34px
        );


    font-weight:
        300;


    line-height:
        0.98;


    letter-spacing:
        0.025em;


    text-transform:
        uppercase;


    overflow-wrap:
        anywhere;

}


.aether-entity-title-rule {

    width:
        46px;


    height:
        2px;


    margin:
        14px 0;


    background:
        var(--aether-ui-accent);


    box-shadow:

        0 0 16px
        rgba(
            var(--aether-ui-rgb),
            0.55
        );
}


/*
=====================================================
OVERVIEW CONTEXT
=====================================================
*/


.aether-entity-content {

    position:
        relative;


    min-width:
        0;


    padding-top:
        clamp(
            12px,
            1.6vh,
            18px
        );


    border-top:

        1px solid
        rgba(
            var(--aether-ui-rgb),
            0.13
        );


    transition:
        opacity var(--aether-motion-content-swap-duration) ease;

}


.aether-entity-content.is-shifting {

    opacity:
        0;

}


/*
=====================================================
FOOTER
=====================================================
*/


.aether-entity-footer-left,
.aether-entity-footer-right {

    opacity:
        0.58;

}


.aether-entity-title,
.aether-entity-kicker,
.aether-entity-navigation-label,
.aether-entity-navigation-title,
.aether-entity-navigation-detail,
.aether-entity-footer {

    color:
        var(--aether-lens-ink);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.14);

}


.aether-entity-view {

    --aether-ui-ink:
        #000;

    color:
        var(--aether-ui-ink);

}


/*
=====================================================
RESPONSIVE
=====================================================
*/


@media (
    max-width: 1050px
) {

    .aether-entity-main {

        grid-template-columns:

            minmax(
                130px,
                0.55fr
            )

            minmax(
                300px,
                1.7fr
            )

            minmax(
                240px,
                0.9fr
            );

    }

}



@media (
    max-width: 820px
) {

    .aether-entity-shell {

        inset:
            24px;

    }


    .aether-entity-main {

        grid-template-columns:

            120px

            minmax(
                0,
                1fr
            );

    }


    .aether-entity-overview-right {

        display:
            none;

    }

}



@media (
    max-width: 620px
) {

    .aether-entity-main {

        grid-template-columns:

            105px

            minmax(
                0,
                1fr
            );


        gap:
            12px;

    }

}