/* css/notice-bar.css
 * 数据上新条幅（2026-11-06 方案书 01，形态按 2026-11-06 用户定案改）
 * ============================================================================
 * 形态：贴在蓝色顶栏正下方、与顶栏同宽的通栏提示（Office 信息栏那种）：
 *   - 浅橙黄底，不用红，避免被误读为报错；
 *   - position: sticky，top = 顶栏实测高度（js/script.js 写入 px），
 *     页面滚动时与顶栏一起常驻吸附，不跟着内容滚走；
 *   - 高度桌面约 40px，移动端更紧凑，绝不折行；
 *   - 展开面板是绝对定位下拉，浮在内容之上，不推挤布局；
 *   - 类名统一 nb- 前缀（中性命名），减少被广告拦截规则按 .notice/.banner 命中。
 * DOM 由 js/script.js 运行时创建（源码不留浮窗标记），本文件只负责样式。
 * ========================================================================== */

.nb-wrap {
    /* 全宽通栏：与 .main-topbar 同宽（body 直接子元素，无左右留白） */
    position: sticky;
    top: 56px;                  /* = 顶栏 min-height；js/script.js 会用实测高度覆盖成 inline px */
    z-index: 1029;              /* 低于 .main-topbar(1030) 与抽屉遮罩(9999)，高于页面内容 */
    margin: 0;
}

/* hidden 属性优先：展开面板 / 整条收起都靠它，不靠 display:none 硬编码 */
.nb-wrap[hidden] {
    display: none !important;
}

.nb-strip {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* 通栏永折行，文案自己截断 */
    gap: 10px;
    min-height: 40px;
    padding: 6px 10px;          /* 左右与顶栏一致（.main-topbar 是 0 10px），视觉上对齐 */
    background: #fff8e1;        /* 浅橙黄 */
    border-bottom: 1px solid #f2d79b;
    color: #6b4b00;             /* 对 #fff8e1 的对比度 ≥ 8:1 */
    font-size: 14px;
    line-height: 1.5;
}

.nb-strip-icon {
    flex: 0 0 auto;
    color: #d97706;
    font-size: 15px;
}

.nb-strip-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nb-strip-text b {
    color: #b45309;
    font-weight: 600;
}

.nb-strip-btn {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #b45309;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.nb-strip-btn:hover {
    background: rgba(217, 119, 6, 0.12);
}

.nb-strip-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 6px;
    border-radius: 4px;
    color: #8a6d3b;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.nb-strip-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #6b4b00;
}

/* 键盘可达：三个按钮都要有可见焦点环 */
.nb-strip button:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 2px;
}

/* 展开面板：绝对定位下拉，浮在内容之上（不推挤首屏，也不撑高吸附条） */
.nb-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fffdf6;
    border-bottom: 1px solid #f2d79b;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

.nb-panel[hidden] {
    display: none !important;
}

.nb-list {
    list-style: none;
    margin: 0;
    padding: 6px 10px;
}

.nb-item {
    padding: 6px 0;
    border-bottom: 1px dashed #f0e0bd;
    font-size: 13px;
    color: #5b4520;
    line-height: 1.6;
}

.nb-item:last-child {
    border-bottom: 0;
}

/* 移动端：更紧凑，仍单行（文案省略号截断） */
@media (max-width: 575.98px) {
    .nb-strip {
        gap: 6px;
        min-height: 36px;
        padding: 6px 6px;      /* 手机端顶栏是 0 6px */
        font-size: 13px;
    }
    .nb-strip-btn {
        font-size: 12px;
        padding: 2px 4px;
    }
    .nb-strip-close {
        padding: 4px;
    }
    .nb-list {
        padding: 6px 10px;
    }
}

/* 运营信息不打印（print.css 也会兜一层） */
@media print {
    .nb-wrap {
        display: none !important;
    }
}