my-description {
    position: relative;
    box-sizing: border-box;
    width: 100%; height: auto;
    padding: 0rem;
    border-radius: var(--border-radius);
    background-color: transparent;
    display: flex;
    flex-direction: column;
    transition: padding var(--transition-duration);
    pointer-events: all;
}

/* Charles Gratiot Jr. - Pseudo-element carries the blur, fades in via opacity */
my-description::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transition: opacity var(--transition-duration);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

body.descr my-description {
    padding: 1rem;
}

body.descr my-description::before {
    opacity: 1;
}

/* Charles Gratiot Jr. - Caret as DOM element with glassmorphism (scales with cluster) */
#description-caret {
    position: absolute;
    right: 1.2rem; /* Charles Gratiot Jr. - Align with info button */
    top: 100%; /* Charles Gratiot Jr. - Flush with bottom of description */
    width: 1.6rem;
    height: 1rem;
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%); /* Triangle pointing down */
    opacity: 0;
    transition: opacity var(--transition-duration);
    pointer-events: none;
}

body.descr #description-caret {
    opacity: 1;
}

/* John R - Moved caret to button bar (section[btns][nav]) in index.css for proper alignment
my-description::before  {
    content: '';
    position: absolute;
    right: 0.7rem; top: 100%; transform: translate(-50%,0);
    width: 0px; height: 0px;
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: rgba(0,0,0,0.6) transparent transparent transparent;
    backdrop-filter: blur(5px);
    transition: opacity var(--transition-duration);
    opacity: 0;
}

body.descr my-description::before  {
    opacity: 1;
}
*/

my-description div.title-stage  {
    position: relative;
    width: auto; height: auto; /* Charles Gratiot Jr. - Changed from 100% to auto for glassmorphism sizing */
    box-sizing: border-box;
    padding: 0.8rem 1.2rem; /* Charles Gratiot Jr. - Padding for glassmorphism pill */
    margin-left: auto; /* Charles Gratiot Jr. - Push to right */
    text-align: right;
    border-radius: var(--popup-border-radius);
    /* Charles Gratiot Jr. - Glassmorphism using global variables */
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: opacity var(--transition-duration), padding var(--transition-duration), background-color var(--transition-duration), backdrop-filter var(--transition-duration);
}

body.descr my-description div.title-stage  {
    width: 100%; /* Charles Gratiot Jr. - Full width when open */
    padding: 0.5rem 1rem 1rem 1rem;
    margin-left: 0;
    text-align: left;
    background-color: transparent; /* Charles Gratiot Jr. - No separate bg when open */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none; /* Charles Gratiot Jr. - Remove glassmorphism shadow when open */
    border-radius: 0;
}

my-description div.title-stage my-description-title  {
    position: relative;
    width: 100%; height: auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.4rem;
    text-align: right;
    background-color: rgba(0,0,0,0.0);
    color: #ffffff;
    white-space: normal;
    transition: opacity var(--transition-duration), width var(--transition-duration);
    opacity: 1;
}

my-description div.title-stage div.spacer  {
    position: relative;
    width: 0%; height: auto;
    transition: width var(--transition-duration);
}

body.descr my-description div.title-stage my-description-title  {
    width: 0%;
}

body.descr my-description div.title-stage div.spacer  {
    width: 100%;
}

my-description div.sa {
    position: relative;
    display: block;
    width: 100%; max-height: 0rem;
    transition: opacity var(--transition-duration);
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    /* --scroll-area-thumb-minsize: 30; */
    transition: padding var(--transition-duration), height var(--transition-duration), max-height var(--transition-duration);
}

body.descr my-description div.sa {
    max-height: none; /* C Gratiot - Removed restriction, clamp handles sizing */
}

my-description my-description-text  {
    position: absolute;
    width: 100%; height: auto;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.4rem;
    padding: 0rem 1rem 1rem 1rem;
    color: #ffffff;
    opacity: 1;
    transition: opacity var(--transition-duration);
}

body.descr my-description my-description-text  {
    opacity: 1;
}

my-description scroll-bar {
    position: absolute;
    right: 1rem; top: 5rem; width: 1rem; bottom: 1rem;
    background-color: rgba(0,0,0,0.0);
    --thumb-minsize: 16;
}


my-description .audio_timeline {
    position: absolute;
    left: 0rem; top: 0rem; width: 100%; height: 0.3rem;
    background-color: rgba(255,255,255,0.3);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    transition: opacity var(--transition-duration);
    pointer-events: none;
    opacity: 0;
}

my-description .audio_timeline .audio_time {
    position: absolute;
    left: 0rem; top: 0rem; width: 30%; height: 100%;
    background-color: rgba(255,255,255,1);
}

body.audio_guide.audio_on.descr my-description .audio_timeline {
    opacity: 1;
}



@media screen and (max-width: 500px) {

    /* =====================================================================
       MOBILE DESCRIPTION STATES - Charles Gratiot Jr.

       CLOSED STATE (no body.descr):
       - Title floats bottom-right with NO glassmorphism background
       - White text with shadow (set in light_mode.css)
       - Spacing controlled by flexbox gap in index.css

       OPEN STATE (body.descr present):
       - Full description box appears with dark background
       - Spacing controlled by margin, not transforms
       - Title inside box is left-aligned, black text
       ===================================================================== */

    /* CLOSED STATE - title only, no background */
    my-description div.title-stage {
        text-align: right;
        padding: 0 1rem 0.8rem 1.2rem; /* Francis Livernois - Reduced right padding to 1rem to move title right */
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }

    my-description div.title-stage my-description-title {
        color: #ffffff !important;
        font-size: 1.8rem; /* Charles Gratiot Jr. - Smaller title in closed state */
    }

    /* OPEN STATE - restore normal title size */
    body.descr my-description div.title-stage my-description-title {
        font-size: 2.4rem;
    }

    /* OPEN STATE */
    body.descr my-description {
        margin-bottom: 1.3rem; /* Francis Livernois - Moved down by 1.5rem */
        background-color: rgba(0, 0, 0, 1); /* Full opacity on mobile */
    }

    /* Francis Livernois - Make caret solid black on mobile to match box */
    /* Apply to base state to prevent transition glitches */
    #description-caret {
        background-color: rgba(0, 0, 0, 1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin-top: -1px;
        will-change: opacity, transform; /* Force GPU layer */
        /* Ensure clip-path persists */
        -webkit-clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
        clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
        transition: opacity 0s; /* Francis Livernois - Disappear instantly on close */
        opacity: 0;
    }

    body.descr #description-caret {
        /* Only animate opacity */
        transition: opacity 0.3s ease-out 0.4s; /* Francis Livernois - Wait for box to expand before showing */
    }

    /* Francis Livernois - Text vanishes instantly on close */
    my-description my-description-text {
        transition: opacity 0s;
    }

    body.descr my-description my-description-text {
        transition: opacity 0.3s ease-out 0.2s; /* Slight delay on open */
    }

    body.descr my-description div.title-stage {
        text-align: left;
    }

}