/* 心猿社文章Tab选项卡 — 前端样式 */
/* Brand: #ff8700 */

.xys-article-tabs {
    --xys-accent: #ff8700;
    --xys-accent-hover: #e67a00;
    --xys-accent-pressed: #cc6d00;
    --xys-accent-light: #fff4e8;
    --xys-accent-shadow: rgba(255, 135, 0, 0.28);
    --xys-border: var(--main-border-color, rgba(0, 0, 0, 0.08));
    --xys-muted-bg: var(--muted-bg-color, #f8f9fb);
    --xys-panel-bg: var(--main-bg-color, transparent);
    --xys-radius: 10px;
    --xys-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 1.8rem 0;
}

/* ---- Tab 导航栏 ---- */
.xys-article-tab-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 20px;
    padding: 0 4px 16px;
    border-bottom: 1.5px solid var(--xys-border);
    /* 移动端平滑滚动 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.xys-article-tab-list::-webkit-scrollbar {
    display: none;
}

/* ---- 多 Tab 溢出：水平滚动模式 ---- */
.xys-article-tab-list.xys-tabs-scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(
        to right,
        #000 calc(100% - 36px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 calc(100% - 36px),
        transparent 100%
    );
}

.xys-article-tab-list.xys-tabs-scrollable.xys-tabs-scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* 两侧都有溢出时，两边都加渐变 */
.xys-article-tab-list.xys-tabs-scrollable.xys-tabs-scrolled-start:not(.xys-tabs-scrolled-end) {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 36px,
        #000 calc(100% - 36px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 36px,
        #000 calc(100% - 36px),
        transparent 100%
    );
}

/* ---- Tab 按钮 ---- */
.xys-article-tab-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--xys-radius);
    background: var(--xys-muted-bg);
    color: #4a4a4a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
        color var(--xys-transition),
        background-color var(--xys-transition),
        border-color var(--xys-transition),
        box-shadow var(--xys-transition),
        transform var(--xys-transition);
}

/* 滚动模式下按钮不收缩 */
.xys-tabs-scrollable .xys-article-tab-button {
    flex: 0 0 auto;
}

/* Hover */
.xys-article-tab-button:hover {
    color: var(--xys-accent);
    background: var(--xys-accent-light);
    border-color: rgba(255, 135, 0, 0.15);
    transform: translateY(-1px);
}

/* Focus */
.xys-article-tab-button:focus-visible {
    outline: 2.5px solid var(--xys-accent);
    outline-offset: 2px;
    z-index: 1;
}

/* Active */
.xys-article-tab-button.xys-is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--xys-accent), #f27c00);
    border-color: transparent;
    box-shadow:
        0 4px 12px var(--xys-accent-shadow),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.xys-article-tab-button.xys-is-active:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--xys-accent-hover), #d97000);
}

.xys-article-tab-button.xys-is-active:focus-visible {
    outline-color: var(--xys-accent-hover);
    outline-offset: 3px;
}

/* ---- Tab 图标 ---- */
.xys-article-tab-button-icon,
.xys-article-tab-title-icon {
    flex: 0 0 auto;
    line-height: 1;
    font-size: 1.05em;
}

/* ---- Tab 面板 ---- */
.xys-article-tab-panel {
    display: block;
    padding: 4px 0 0;
    background: var(--xys-panel-bg);
    animation: xysTabFadeIn 0.28s ease;
}

.xys-article-tabs.xys-tabs-ready .xys-article-tab-panel {
    display: none;
}

.xys-article-tabs.xys-tabs-ready .xys-article-tab-panel.xys-is-active {
    display: block;
}

@keyframes xysTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 隐藏冗余标题（JS就绪后） ---- */
.xys-article-tabs.xys-tabs-ready .xys-article-tab-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Tab 标题（非JS回退） ---- */
.xys-article-tab-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}

.xys-article-tab-title::before {
    content: '';
    flex: 0 0 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--xys-accent);
}

/* ---- Tab 正文 ---- */
.xys-article-tab-body > :first-child {
    margin-top: 0;
}

.xys-article-tab-body > :last-child {
    margin-bottom: 0;
}

/* ---- 独立 Tab 卡片 ---- */
.xys-article-tab-standalone {
    position: relative;
    margin: 1.5rem 0;
    padding: 18px 20px;
    border: 1px solid var(--xys-border);
    border-left: 4px solid var(--xys-accent);
    border-radius: var(--xys-radius);
    background: var(--xys-panel-bg);
}

.xys-article-tab-standalone .xys-article-tab-title {
    margin-bottom: 12px;
    font-size: 17px;
}

/* ================================================
   响应式 — 平板端 (≤ 768px)
   ================================================ */
@media (max-width: 768px) {
    .xys-article-tab-list {
        gap: 5px;
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    .xys-article-tab-button {
        min-height: 36px;
        padding: 7px 14px;
        font-size: 13px;
    }
}

/* ================================================
   响应式 — 手机端 (≤ 640px)
   多 Tab 时自动转为横向滚动，少量 Tab 则纵向堆叠
   ================================================ */
@media (max-width: 640px) {
    .xys-article-tab-list {
        gap: 6px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    /* 2~3 个 Tab：按 2 列均分 */
    .xys-article-tab-button {
        flex: 1 1 calc(50% - 6px);
        min-height: 42px;
        padding: 9px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* ≥4 个 Tab：强制水平滚动，保持单行 */
    .xys-article-tab-list.xys-tabs-scrollable .xys-article-tab-button {
        flex: 0 0 auto;
        min-width: max-content;
    }

    /* 提示用户可滑动 */
    .xys-article-tab-list.xys-tabs-scrollable::after {
        content: '';
        position: sticky;
        right: 0;
        flex: 0 0 28px;
        align-self: stretch;
        pointer-events: none;
        border-radius: 4px;
    }

    .xys-article-tab-standalone {
        padding: 14px 16px;
    }

    .xys-article-tab-title {
        font-size: 16px;
    }
}

/* ================================================
   响应式 — 小屏手机 (≤ 400px)
   ================================================ */
@media (max-width: 400px) {
    .xys-article-tab-list {
        gap: 5px;
    }

    /* 滚动模式在小屏上更紧凑 */
    .xys-article-tab-list.xys-tabs-scrollable {
        gap: 4px;
        -webkit-mask-image: linear-gradient(
            to right,
            #000 calc(100% - 28px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            #000 calc(100% - 28px),
            transparent 100%
        );
    }

    .xys-article-tab-list.xys-tabs-scrollable .xys-article-tab-button {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 12px;
        border-radius: 7px;
    }

    /* 非滚动模式：2列 */
    .xys-article-tab-list:not(.xys-tabs-scrollable) .xys-article-tab-button {
        flex: 1 1 calc(50% - 5px);
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ================================================
   响应式 — 极小屏 (≤ 340px)：非滚动模式单列堆叠
   ================================================ */
@media (max-width: 340px) {
    .xys-article-tab-list:not(.xys-tabs-scrollable) .xys-article-tab-button {
        flex: 1 1 100%;
    }
}

/* ---- 暗色模式适配 ---- */
@media (prefers-color-scheme: dark) {
    .xys-article-tab-button {
        color: #ccc;
        background: rgba(255, 255, 255, 0.06);
    }

    .xys-article-tab-button:hover {
        color: #ffa033;
        background: rgba(255, 135, 0, 0.12);
        border-color: rgba(255, 135, 0, 0.2);
    }

    .xys-article-tab-button.xys-is-active {
        color: #fff;
        background: linear-gradient(135deg, var(--xys-accent), #e07800);
    }

    .xys-article-tab-title {
        color: #e8e8e8;
    }
}