/*
 * 全站服务器不可用横幅（ADR-067）—— 结构层，只引用 --theme-* 语义令牌、不含色值。
 *
 * 为什么单独成文而不是放进 app-common.css：本项目**多数 Jinja 页是自包含的**，
 * app-common.css 只被 spa_app.html 加载（base_app.html 已随 Jinja 应用形态退役删除，ADR-068）；
 * 云端教程、认证页、admin、香蕉页、hjsd、工具页都不加载它。故本文件由 templates/_theme_head.html 统一引入
 * ——那是 ADR-026 建立的全站唯一共享注入点（全部 Jinja 页 + React 壳都 include 它）。
 *
 * 配色一律走令牌（**皮肤文件不得为横幅写任何声明**，沿用 ADR-026 决策 5）：
 * 底色用主题深色族（随皮肤可见地变化），文字/图标/描边用警示色（保留「故障」语义）。
 *
 * 定位：fixed 于导航条正下方、页面滚动时始终可见。锚点高度 --xy-header-h 由
 * static/js/server-banner.js 运行期实测（移动端导航会 flex-wrap 换行、高度变 auto，
 * 写死 56px 会被第二行导航压住；无固定导航的页面该值为 0px）；横幅显示时前端在
 * body 上补一份等高的 padding-top，使内容整体下移而不被压住。
 */
.xy-server-banner {
    position: fixed;
    top: var(--xy-header-h, 0px);
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 36px;
    padding: 0 1rem;
    overflow: hidden;
    background: var(--theme-bg-dark);
    border-bottom: 1px solid rgba(var(--theme-error-rgb, 255, 68, 68), 0.55);
    color: var(--theme-error);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.xy-server-banner[hidden] {
    display: none;
}

.xy-so-icon {
    flex-shrink: 0;
    line-height: 1;
}

.xy-so-viewport {
    flex: 1;
    overflow: hidden;
}

.xy-so-track {
    display: inline-flex;
    white-space: nowrap;
    animation: xy-so-marquee var(--xy-so-duration, 24s) linear infinite;
}

.xy-so-item {
    padding-right: 4rem;
}

@keyframes xy-so-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 尊重系统「减少动效」：取消滚动，降级为静态居中文字（第二份副本隐藏） */
@media (prefers-reduced-motion: reduce) {
    .xy-so-track {
        animation: none;
        justify-content: center;
        width: 100%;
    }
    .xy-so-item:last-child {
        display: none;
    }
    .xy-so-item {
        padding-right: 0;
    }
}