/* ==========================================================================
   UI Shell v1 — 外壳层统一规范（2026-11-05）
   只做外观：设计 token、交互四态、空/加载/错误三态、过渡动效。
   不引入新视觉语言，沿用 common.css 的 --text/--card-bg/--border/--ink-muted 变量。
   加载顺序：必须在 common.css 之后（主题壳与业务样式之前定义）。
   ========================================================================== */

:root {
    /* 字号阶梯：12 / 14 / 16 / 20 / 28 */
    --m2m-fs-12: 12px;
    --m2m-fs-14: 14px;
    --m2m-fs-16: 16px;
    --m2m-fs-20: 20px;
    --m2m-fs-28: 28px;

    /* 间距：8pt 网格，4px 为半格 */
    --m2m-sp-1: 4px;
    --m2m-sp-2: 8px;
    --m2m-sp-3: 12px;
    --m2m-sp-4: 16px;
    --m2m-sp-5: 24px;
    --m2m-sp-6: 32px;
    --m2m-sp-7: 48px;
    --m2m-sp-8: 64px;

    /* 圆角：三档，收敛所有卡片/按钮 */
    --m2m-radius-sm: 8px;
    --m2m-radius-md: 12px;
    --m2m-radius-lg: 16px;

    /* 阴影：两级，不叠加第三级 */
    --m2m-shadow-1: 0 1px 2px rgba(15, 23, 42, .08);
    --m2m-shadow-2: 0 10px 28px rgba(15, 23, 42, .14);

    /* 动效：≤200ms，只动 transform / opacity */
    --m2m-dur: 160ms;
    --m2m-dur-fast: 120ms;
    --m2m-ease: cubic-bezier(.2, .8, .2, 1);

    /* 焦点环（亮色下加深，保证 3:1 以上） */
    --m2m-focus: #4f8ff7;
    --m2m-ring: 0 0 0 2px var(--m2m-focus);
}

html.light-theme,
html[data-theme="light"] {
    --m2m-focus: #0055b3;
    --m2m-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --m2m-shadow-2: 0 10px 28px rgba(15, 23, 42, .10);
}

/* ---------- 1. 键盘可达：所有可交互元素统一可见焦点环 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.subsite-menu-link:focus-visible,
.explore-card:focus-visible {
    outline: 2px solid var(--m2m-focus) !important;
    outline-offset: 2px !important;
    border-radius: var(--m2m-radius-sm);
}

/* ---------- 2. 交互四态：hover / active / focus-visible / disabled ---------- */
.btn,
.nav-link,
.subsite-menu-link,
.footer-link,
.explore-card {
    transition:
        transform var(--m2m-dur) var(--m2m-ease),
        opacity var(--m2m-dur) var(--m2m-ease),
        background-color var(--m2m-dur) var(--m2m-ease),
        border-color var(--m2m-dur) var(--m2m-ease);
}

.btn:hover:not(:disabled):not(.disabled),
.nav-link:hover,
.subsite-menu-link:hover,
.footer-link:hover {
    opacity: .92;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0) scale(.985);
    opacity: .96;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 导航：当前项用 2px 底部描边，不靠颜色单独表达 */
.nav-link.active,
.subsite-menu-link.active {
    position: relative;
}

.nav-link.active::after,
.subsite-menu-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-text, #60a5fa);
    opacity: .9;
}

/* ---------- 3. 触控目标：移动端不小于 44×44 ---------- */
@media (max-width: 767.98px) {
    .btn,
    .btn-sm,
    .nav-link,
    .subsite-menu-link,
    .footer-link,
    .footer-meta-link,
    .explore-card {
        min-height: 44px;
    }
}

/* ---------- 4. 加载骨架（替代空白/一行灰字） ---------- */
.m2m-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--m2m-radius-sm);
    background: color-mix(in srgb, var(--ink-muted, #94a3b8) 18%, transparent);
}

.m2m-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    animation: m2m-skeleton-sweep 1.4s var(--m2m-ease) infinite;
}

.m2m-skeleton-line {
    height: 14px;
    margin-bottom: var(--m2m-sp-2);
}

.m2m-skeleton-line--title {
    height: 20px;
    width: 56%;
}

.m2m-skeleton-line--short {
    width: 38%;
}

.m2m-skeleton-card {
    height: 96px;
    border-radius: var(--m2m-radius-md);
}

@keyframes m2m-skeleton-sweep {
    to { transform: translateX(100%); }
}

/* ---------- 5. 空态 / 无结果 / 错误 三态统一（复用 .m2m-empty） ---------- */
.m2m-empty {
    padding: var(--m2m-sp-6) var(--m2m-sp-3);
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: var(--m2m-radius-md);
    background: color-mix(in srgb, var(--card-bg, #fff) 70%, transparent);
}

.m2m-empty--error .m2m-empty-art {
    color: #dc2626;
}

.m2m-empty--error .m2m-empty-title {
    color: #b91c1c;
}

.m2m-empty-actions .btn {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--m2m-radius-sm);
    font-size: var(--m2m-fs-14);
}

/* ---------- 6. 探索聚合页 ---------- */
.m2m-explore {
    width: 100%;
    max-width: var(--site-wide, 1600px);
    margin: 0 auto;
    padding: var(--m2m-sp-6) var(--m2m-sp-4) var(--m2m-sp-8);
}

.explore-hero {
    padding: var(--m2m-sp-5);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--m2m-radius-lg);
    background: var(--card-bg, #fff);
    box-shadow: var(--m2m-shadow-1);
    margin-bottom: var(--m2m-sp-5);
}

.explore-hero h1 {
    font-size: var(--m2m-fs-28);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 var(--m2m-sp-2);
    color: var(--text, #1d1d1f);
}

.explore-hero p {
    font-size: var(--m2m-fs-14);
    line-height: 1.7;
    margin: 0;
    color: var(--ink-muted, #5b6178);
}

.explore-section {
    margin-bottom: var(--m2m-sp-5);
}

.explore-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--m2m-sp-2);
    margin: 0 0 var(--m2m-sp-3);
}

.explore-section-head h2 {
    font-size: var(--m2m-fs-20);
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
    color: var(--text, #1d1d1f);
}

.explore-section-head .explore-count {
    font-size: var(--m2m-fs-12);
    color: var(--ink-muted, #5b6178);
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--m2m-sp-3);
}

.explore-card {
    display: flex;
    align-items: center;
    gap: var(--m2m-sp-3);
    min-height: 88px;
    padding: var(--m2m-sp-3) var(--m2m-sp-4);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--m2m-radius-md);
    background: var(--card-bg, #fff);
    box-shadow: var(--m2m-shadow-1);
    text-decoration: none;
    color: var(--text, #1d1d1f);
}

.explore-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--m2m-shadow-2);
    border-color: var(--accent-text, #60a5fa);
}

.explore-card:active {
    transform: translateY(0);
    box-shadow: var(--m2m-shadow-1);
}

.explore-card-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    border-radius: var(--m2m-radius-sm);
    background: color-mix(in srgb, var(--accent-text, #60a5fa) 12%, transparent);
}

.explore-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.explore-card-title {
    display: flex;
    align-items: center;
    gap: var(--m2m-sp-2);
    font-size: var(--m2m-fs-16);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text, #1d1d1f);
}

.explore-badge {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: var(--m2m-fs-12);
    line-height: 1.6;
    text-align: center;
    color: var(--accent-text, #60a5fa);
    background: color-mix(in srgb, var(--accent-text, #60a5fa) 14%, transparent);
}

.explore-card-desc {
    font-size: var(--m2m-fs-12);
    line-height: 1.6;
    color: var(--ink-muted, #5b6178);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.explore-card-arrow {
    flex: 0 0 auto;
    color: var(--ink-muted, #5b6178);
    font-size: var(--m2m-fs-16);
}

.explore-note {
    margin-top: var(--m2m-sp-3);
    padding: var(--m2m-sp-3);
    border-radius: var(--m2m-radius-sm);
    border: 1px solid var(--border, #e5e7eb);
    font-size: var(--m2m-fs-12);
    line-height: 1.65;
    color: var(--ink-muted, #5b6178);
}

.explore-note--warn {
    border-color: rgba(245, 158, 11, .45);
    color: #fcd34d;
    background: rgba(245, 158, 11, .08);
}

.explore-note a {
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.light-theme .explore-note--warn,
html[data-theme="light"] .explore-note--warn {
    color: #92400e;
}

html.light-theme .explore-note a,
html[data-theme="light"] .explore-note a {
    color: #1d4ed8;
}

@media (max-width: 767.98px) {
    .m2m-explore {
        padding: var(--m2m-sp-4) var(--m2m-sp-3) var(--m2m-sp-7);
    }

    .explore-hero {
        padding: var(--m2m-sp-4);
    }

    .explore-hero h1 {
        font-size: var(--m2m-fs-20);
    }

    .explore-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- 7. 动效克制：尊重系统减弱动效设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .m2m-skeleton::after {
        display: none;
    }
}

/* 外壳文本字号统一五档：12 / 14 / 16 / 20 / 28（内容区字号仍由各内容样式自行控制） */
.nav-link,
.m2m-mnav-item {
    font-size: var(--m2m-fs-14, 14px);
}

.footer-meta-link {
    font-size: var(--m2m-fs-12, 12px);
}

.m2m-welcome-close {
    font-size: var(--m2m-fs-16, 16px);
}

.m2m-topbar .dropdown-item,
.m2m-topbar .dropdown-toggle {
    font-size: var(--m2m-fs-12, 12px);
}