/* ==========================================================================
   nav-more — 导航栏「更多」下拉（.jx-nav__more，基于原生 <details>）
   独立文件（app.css 为混合换行、不便追加），全部使用既有设计令牌，
   自动适配明暗主题与 iOS 主题。仅在 .jx-nav__links 内使用，
   该容器在 <1024px 为 display:none，故无需额外移动端规则。
   ========================================================================== */

.jx-nav__more {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.jx-nav__more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.375rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    user-select: none;
    transition:
        color 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.jx-nav__more-toggle::-webkit-details-marker {
    display: none;
}

.jx-nav__more-toggle::marker {
    content: '';
}

.jx-nav__more-toggle:hover,
.jx-nav__more[open] > .jx-nav__more-toggle,
.jx-nav__more-toggle.is-active {
    color: var(--text);
}

.jx-nav__more-toggle.is-active { font-weight: 600; }

.jx-nav__more-toggle:active { transform: scale(0.94); }

.jx-nav__more-toggle:focus-visible {
    outline: 2px solid var(--fill-primary);
    outline-offset: 2px;
}

.jx-nav__more-caret {
    flex: none;
    opacity: 0.65;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.jx-nav__more-toggle:hover .jx-nav__more-caret { opacity: 1; }

.jx-nav__more[open] > .jx-nav__more-toggle .jx-nav__more-caret {
    opacity: 1;
    transform: rotate(180deg);
}

.jx-nav__more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    display: grid;
    gap: 0.125rem;
    min-width: 9.5rem;
    padding: 0.25rem;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: jx-nav-more-in 0.16s ease both;
}

@keyframes jx-nav-more-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jx-nav__more-link {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition),
        color var(--transition);
}

.jx-nav__more-link:hover {
    background: var(--fill-secondary);
    color: var(--text);
}

.jx-nav__more-link.is-active {
    color: var(--text);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .jx-nav__more-toggle,
    .jx-nav__more-caret {
        transition-duration: 0.01ms !important;
    }

    .jx-nav__more-menu {
        animation: none;
    }
}