/* css/topbar.css —— 全站顶栏（模块页 + 文章页共用）
   规格（2026-09-29 与用户对齐）：
   - 顶栏永远**单行**，绝不折行；手机上副标题用省略号截断（用户选 C）
   - 左侧汉堡、右侧分享按钮，位置对称、同尺寸
   - 分享按钮只做一件事：复制当前页 URL + 提示（用户选 B）
   - 默认用 position: sticky（常驻顶部且不产生布局位移）；
     simulation.php 的布局依赖 fixed-top（body 有 padding-top:56px），传 $fixed=true 走 .is-fixed 分支。 */

/* ===== 顶栏本体 ===== */
.main-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;              /* 关键：永不折行 */
    gap: 6px;
    min-height: 56px;
    padding: 0 10px;
    background: #0d6efd;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(13, 110, 253, .28);
}

.main-topbar.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
}

.main-topbar .mtb-brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.main-topbar .mtb-sub {
    flex: 1 1 auto;
    min-width: 0;                   /* 允许被压缩，配合 ellipsis */
    margin-left: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2026-10-26：顶部回首页小房子（mtb-home / .has-home）已整体移除；回首页改由底部导航 + 品牌名 + 抽屉房子承接。对应选择器一并删除，避免死代码。 */

/* 分享按钮：与左侧汉堡对称（同为 36×36 的热区） */
.main-topbar .mtb-share {
    flex: none;
    margin-left: auto;              /* 顶到最右 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.main-topbar .mtb-share:active {
    background: rgba(255, 255, 255, .15);
}

/* 分享图标 = 微信那款「弧形转发箭头」（描边、指向右）。
   Bootstrap Icons 里没有现成的向右弧形箭头：bi-forward / bi-forward-fill 都是**方块直箭头**，
   只有 bi-reply 是弧形（但指向左）⇒ 用 bi-reply 水平镜像得到目标形状。 */
.main-topbar .mtb-share i {
    display: inline-block;
    font-size: 21px;
    transform: scaleX(-1);
}

@media (max-width: 767px) {
    .main-topbar {
        gap: 4px;
        padding: 0 6px;
    }

    .main-topbar .mtb-brand {
        font-size: 15px;
    }

    .main-topbar .mtb-sub {
        font-size: 12px;
    }
}

/* ===== 复制链接后的轻提示 ===== */
.mtb-toast {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));  /* 让开底部 Tab Bar(66px) */
    z-index: 10001;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .82);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;   /* 停留 10s，绝不能挡住下面的点击 */
}

.mtb-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===== 文章域页脚（文章列表页 + 文章正文页共用，read.php 会把它注入文章页）
   ⚠️ 内部元素一律用 .pf- 前缀：文章模板自带 .note / .name / .home 等通用类名，复用会撞车
      （曾把「数据仅供参考」套上文章自己的绿色注释块样式）。
   淡黄底是用户指定的样式（与文章模板的 --warm 同色系），靠 .page-foot 类选择器
   压过文章模板里的 `footer{margin/background/border}` 元素选择器。 ===== */
.page-foot {
    max-width: 780px;
    margin: 48px auto 0;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    background: #faf6ec;
    border: 0;
    border-radius: 12px;
    text-align: center;
}

.page-foot .pf-name { font-size: 13px; color: #54636a; }
.page-foot .pf-note { margin-top: 6px; font-size: 12px; color: #8a979c; }

/* 页脚链接行：「去看看26年录取数据」+（文章页才有）「回到文章列表」 */
.page-foot .pf-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.page-foot .pf-home,
.page-foot .pf-list {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #0d6efd;
    text-decoration: none;
}

.page-foot .pf-home:hover,
.page-foot .pf-list:hover { text-decoration: underline; }

/* 页脚操作区（仅文章正文页有）：「点赞」+「分享本文」，暖色小药丸，和淡黄底同色系。
   位置：放在 footer **最上方**（用户 2026-09-29 要求），下方才是站名/说明/回首页链接。 */
.page-foot .pf-actions {
    margin: 0 0 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-foot .pf-share,
.page-foot .pf-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border: 1px solid #e6dcc6;
    border-radius: 999px;
    background: #ffffff;
    color: #8a6d3b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.page-foot .pf-share i {
    display: inline-block;
    font-size: 15px;
    transform: scaleX(-1);   /* 同顶栏：bi-reply 镜像 = 向右的弧形转发箭头 */
}

.page-foot .pf-like i { font-size: 15px; }

.page-foot .pf-share:active,
.page-foot .pf-like:not(:disabled):active { background: #f7f2ea; }

/* 点赞数：等宽数字，赞过之后整体转暖红，一眼能看出状态 */
.page-foot .pf-like .pf-like-num {
    color: #b08968;
    font-variant-numeric: tabular-nums;
}

.page-foot .pf-like.is-liked {
    color: #c0392b;
    border-color: #edcfc9;
    background: #fdf4f2;
    cursor: default;
}

.page-foot .pf-like.is-liked .pf-like-num { color: #c0392b; }