.details-menu {
    position: absolute;
    right: 0;
    top: 0;
    padding-inline-end: var(--inline-space);
    padding-block-start: var(--inline-space);
    border-radius: var(--radius-medium);
}

.summary-trigger {
    list-style: none;
    text-align: right;
    width: 100%;
}

.summary-trigger::-webkit-details-marker {
    display: none;
}

.menu {
    background: var(--layer-surface-container);
    border-radius: var(--radius-small);
    inline-size: 50%;
}

[data-controller="dropdown"] {
    position: relative; /* Ensure the parent has relative positioning */
}


[data-dropdown-target="menu"] {
    position: absolute;
    z-index: var(--layer-dropdown);
    top: calc(100% + 4px); /* Small gap between trigger and menu */
    right: 0;
    min-width: 180px; 
    max-width: 280px;
    width: max-content;
    font-size: 14px;
    font-weight: 500;;
    line-height: 20px; /* 1.25 */
    letter-spacing: 0.1px;
    
    /* MD3 Surface styling - inverse of page background */
    background: var(--on-background);
    color: var(--layer-background);
    
    /* MD3 Elevation and shadows */
    border-radius: var(--radius-x-small);
    box-shadow: var(--elevation-2);

    padding-inline: 12px;
    padding-block: 8px;
    
    .menu-item-text {
        flex: 1;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
            li {
            padding: var(--inline-space);
            cursor: pointer;
        }
    }
}

[data-dropdown-target="menu"] .menu-item,
[data-dropdown-target="menu"] button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px; /* MD3 touch target */
    padding: 12px 16px; /* MD3 standard padding */
    border: none;
    background: transparent;
    color: var(--layer-background);
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-4); /* 400 */
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard);
    
    /* Remove default button/link styles */
    font-family: inherit;
    outline: none;
    
    /* Hover state */
    &:hover {
        background: var(--layer-background);
        color: var(--on-background);
    }
    
    /* Focus state */
    &:focus-visible {
        background: var(--layer-background);
        color: var(--on-background);
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }
    
    /* Active/pressed state */
    &:active {
        background: var(--layer-background);
        color: var(--on-background);
    }
}

/* Leading icons in menu items */
[data-dropdown-target="menu"] .menu-item svg,
[data-dropdown-target="menu"] a svg,
[data-dropdown-target="menu"] button svg {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Dividers */
[data-dropdown-target="menu"] hr,
[data-dropdown-target="menu"] .divider {
    border: none;
    height: 1px;
    background: var(--outline-variant);
    margin: var(--size-1) 0; /* 4px top/bottom */
}