/* ==========================================================================
           内容三态样式（loading / error）
           ==========================================================================
           只服务 home_content.js 的内容加载状态：
             - .content-loading  → 首屏文案加载中的轻微占位效果
             - .content-error-banner → 接口失败时的顶部提示条（含重试入口）

           取值全部来自 assets/colors_and_type.css 里的 --typhoon-* 设计 token。
           间距类没有既有 token，这里按 4px 基准使用 CSS 变量，避免散落裸数字。
           ========================================================================== */

        :root {
            --content-space-xs: 4px;
            --content-space-sm: 8px;
            --content-space-md: 16px;
            --content-space-lg: 24px;
            --content-duration-fast: 0.3s;
        }

        /* ---------- loading：只做低干扰的呼吸效果，不放全屏遮罩 ---------- */
        body.content-loading [data-content="hero.tag"],
        body.content-loading [data-content="hero.title"],
        body.content-loading [data-content="hero.highlight"],
        body.content-loading [data-content="hero.description"],
        body.content-loading [data-content="hero.stats"] {
            opacity: 0.45;
            transition: opacity var(--content-duration-fast) ease;
        }

        /* 内容就绪后平滑恢复，避免文字「跳一下」 */
        [data-content] {
            transition: opacity var(--content-duration-fast) ease;
        }

        /* ---------- error：顶部提示条 ---------- */
        .content-error-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--content-space-sm);
            padding: var(--content-space-sm) var(--content-space-md);
            background: var(--typhoon-destructive, #ef4444);
            color: var(--typhoon-destructive-foreground, #ffffff);
            font-family: var(--typhoon-font-sans, sans-serif);
            font-size: 14px;
            line-height: 1.5;
            box-shadow: 0 var(--content-space-xs) var(--content-space-md) rgba(15, 27, 42, 0.18);
        }

        .content-error-text {
            text-align: center;
        }

        .content-error-retry {
            padding: var(--content-space-xs) var(--content-space-md);
            border: 1px solid currentColor;
            border-radius: var(--typhoon-radius-full, 9999px);
            background: transparent;
            color: inherit;
            font-family: inherit;
            font-size: 13px;
            cursor: pointer;
            transition: background-color var(--content-duration-fast) ease;
        }

        .content-error-retry:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.18);
        }

        .content-error-retry:disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* 链接被后台停用：保留元素但不可点，避免布局塌陷 */
        [data-link-disabled="true"] {
            display: none;
        }