/* ============================================================
   国旗护卫队成员管理系统 · 移动端 UI 基座（v2.17）
   ------------------------------------------------------------
   这是「手机端独有布局」的第一层地基，和老的 `mobile.css` 分工明确：

     · `mobile.css`（v1.86，521 行）= **补丁集**：让桌面版式不撑破手机屏
       （表格能横滑、按钮够大、弹窗全屏…）。它是在改「桌面那一套」。
     · 本文件（v2.17 起）= **移动端自己的版式**：底部标签栏、卡片/列表基元、
       安全区、更素的红旗主题、以及手机上更短的转场。
       后续每个页面会逐步把内容搬进这套版式里。

   ⚠️ 三条硬规矩（写在最前面，改这个文件前先读一遍）：
     ① **桌面端一像素都不许动**。所有规则必须收在 `@media (max-width: 768px)`
        （或更窄）里。要加新规则，先问自己：桌面会不会被这条匹配到？
     ② **只动 transform / opacity 做动画**。手机端尤其不能用大面积
        `backdrop-filter`、重阴影、`filter: blur()` 做转场 —— 中低端安卓会掉帧。
     ③ **不用 `100vh`**（手机浏览器地址栏收放会让它跳），要满高就用
        `100dvh` 并给 `100vh` 兜底。

   配套体检：jstest/mobile_audit.mjs（老）+ jstest/check_mobile_ui.mjs（v2.17 新增）
   ============================================================ */

/* ============================================================
   ⚠️⚠️ 唯一一条**故意放在媒体查询外面**的规则（别删、别挪进去）
   ------------------------------------------------------------
   底部标签栏必须**默认就是隐藏的**：
     · 桌面端（宽屏）：没有这条 → `<nav>` 走浏览器默认样式，变成
       **一列蓝色链接**堂堂正正挂在页面最后面！
       （v2.17 第一版就是这样，被 check_contrast 一次抓出 111 处对比度不达标：
         "rgb(0,0,238) 的链接压在深色底上"。）
     · CSS 还没加载完的那一瞬间：同样不会闪出一列链接。
   然后由下面的手机媒体查询把它 `display: flex` 打开 —— 这是"渐进增强"的标准写法：
   **默认没有，够条件才出现。**
   ============================================================ */
.m-tabbar { display: none; }

@media (max-width: 768px) {

    /* ---------- ① 移动端设计令牌 ---------- */
    :root {
        /* 底部标签栏高度 + iPhone 手势条/刘海的安全区 */
        --m-tab-h: 56px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
        --m-safe-t: env(safe-area-inset-top, 0px);
        /* 统一的圆角/间距/字号：页面改版时只用这几个，别各写各的 */
        --m-r: 14px;
        --m-gap: 12px;
        --m-fs: 15px;          /* 中文正文 15px 是手机上比较舒服的档 */
        --m-fs-sm: 13px;
        --m-fs-lg: 17px;
        --m-line: 1.65;
        /* ⚠️⚠️ 颜色**一律接站点自己的变量**，不要写死 #fff。
           为什么：本站有「跟随系统深浅色」和几种配色主题（[data-theme="dark"] /
           "red" …），写死白色的后果是 —— 用户开着深色模式时，
           手机端的卡片变成**一块块刺眼的白**压在深红底上。
           （v2.18 抓手机截图时当场看到的，不是猜的。）
           后面的 #xxx 只是**兜底**：万一某个页面没有定义这些变量，也不会变成透明。
           站点变量：--bg / --surface / --surface-2 / --line / --ink / --gray / --red */
        --m-bg: var(--bg, #f5f6f8);
        --m-card: var(--surface, #ffffff);
        --m-line-c: var(--line, rgba(17, 24, 39, .08));
        --m-ink: var(--ink, #1f2430);
        --m-ink-2: var(--gray, #6b7280);
        --m-accent: var(--red-ink, #c8102e);
    }

    /* iOS 横竖屏切换时字号被自动放大，会把版面撑歪 */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    /* 底栏是固定的，所以给 body 留出等高的下边距 ——
       否则页面最后一行内容会被压在底栏底下点不到。
       （多给 8px：微信把字体调大时底栏会长高一点点，别让内容正好压在边上） */
    body {
        padding-bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 8px);
        line-height: var(--m-line);
        /* 微信里手指往下拉会整页"橡皮筋"回弹（还会误触它自带的下拉刷新），
           这里把页面级回弹收住；页面内部该滚的地方照常滚（contain 不是 none）。 */
        overscroll-behavior-y: contain;
    }

    /* 手机上"点一下要有反应"比"渲染多快"更影响手感 ——
       现代浏览器已经没有 300ms 点按延迟，但**没有任何反馈**照样会被觉得是卡。
       统一给可点元素一个很轻的按下反馈（只动 transform/背景，不触发重排）。 */
    .m-tabbar a, .btn, .p-btn, .g-btn, .adm-btn, .pc-menu button, .nav a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .p-btn:active, .g-btn:active, .adm-btn:active, .pc-menu button:active {
        transform: scale(.975);
        transition: transform .1s ease;
    }
    /* ⚠️ 别给 body/全站加 user-select:none —— 队员要能复制学号、手机号、队号。
       只对纯按钮和底栏关掉长按选中，免得点两下选中一片文字。 */
    .m-tabbar, .btn, .p-btn, .g-btn, .adm-btn, .nav a, .pc-menu button { -webkit-user-select: none; user-select: none; }

    /* ⚠️ iOS Safari 在输入框字号 <16px 时会**自动放大整页**（页面突然能横向拖，
       用户得手动缩回去，非常烦）。所以手机上所有输入控件一律 ≥16px。
       桌面端不受影响（这条在媒体查询里）。 */
    input, select, textarea { font-size: 16px; }

    /* ⚠️（留给后续每页改版的一条硬规矩，不是这一版做完的）
       `backdrop-filter`（毛玻璃）会**逐帧模糊背后的内容**，是中低端安卓滚动掉帧的
       头号原因，QQ 浏览器 14.9 更是直接不支持。但**不能一刀切**：
       首页头部是"透在首屏大旗上"的设计，强行给白底会毁掉观感。
       所以做法是：**每页改版时**把它那页的固定/粘性毛玻璃换成"不透明底色 + 1px 下边框"，
       页内静止卡片可以不换（不随滚动重绘，代价小得多）。 */

    /* ---------- ② 底部标签栏 ---------- */
    .m-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9000;                    /* 在页面内容之上、在「内测遮罩 99996」之下 */
        display: flex;
        align-items: stretch;
        /* ⚠️ 用 min-height 而不是 height：微信的字体放大（8 档）会把标签字撑大，
           写死高度会把文字压扁/裁掉。让它能长高，body 那边已经多留了 8px。 */
        min-height: calc(var(--m-tab-h) + var(--m-safe-b));
        padding-bottom: var(--m-safe-b);   /* 让按钮不被手势条盖住 */
        background: var(--m-card);
        border-top: 1px solid var(--m-line-c);
        /* 用极轻的阴影取代 backdrop-filter：中低端安卓不会为此掉帧 */
        box-shadow: 0 -2px 10px rgba(17, 24, 39, .05);
        transform: translateY(0);
        transition: transform .18s ease;
        will-change: transform;
    }
    /* 弹窗/遮罩打开时（个人中心、编辑器…）把底栏收下去，别压住弹窗底部按钮 */
    html.m-tab-hidden .m-tabbar { transform: translateY(115%); }

    .m-tabbar a {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--m-tab-h);       /* ≥48px：手指点得中（WCAG 2.2 / Material 都认这个） */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        /* v2.22：11.5px → 12px。底栏标签本来就比正文小（iOS/安卓原生也在 10~12px），
           但总检把"<12px"当红线，而且 12px 在 56px 高的底栏里完全放得下 —— 那就抬上去。 */
        font-size: 12px;
        line-height: 1.15;
        color: var(--m-ink-2);
        text-decoration: none;
        background: none;
        border: 0;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease;
    }
    .m-tabbar a .m-ico {
        font-size: 20px;
        line-height: 1;
        /* 只用 transform 做"选中放大"，不动布局 → 不触发重排 */
        transition: transform .18s ease, opacity .18s ease;
        opacity: .82;
    }
    .m-tabbar a .m-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .m-tabbar a.is-on { color: var(--m-accent); font-weight: 600; }
    .m-tabbar a.is-on .m-ico { transform: translateY(-1px) scale(1.08); opacity: 1; }
    .m-tabbar a:active .m-ico { transform: scale(.92); }
    /* 手指按住时给一点点反馈（手机上没有 hover，只能用 active） */
    .m-tabbar a:active { background: rgba(200, 16, 46, .04); }

    /* ---------- ③ 移动端内容基元（页面改版时复用，避免各写各的） ---------- */
    .m-card {
        background: var(--m-card);
        border: 1px solid var(--m-line-c);
        border-radius: var(--m-r);
        padding: 14px;
        margin: 0 0 var(--m-gap);
    }
    .m-card > h3, .m-card > h4 { margin: 0 0 8px; font-size: var(--m-fs-lg); }
    .m-muted { color: var(--m-ink-2); font-size: var(--m-fs-sm); }

    /* 通用「列表行」：左边标题、右边值，整行可点 */
    .m-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 10px 2px;
        border-bottom: 1px solid var(--m-line-c);
        font-size: var(--m-fs);
    }
    .m-row:last-child { border-bottom: 0; }
    .m-row .m-r-main { flex: 1 1 auto; min-width: 0; }
    .m-row .m-r-sub { color: var(--m-ink-2); font-size: var(--m-fs-sm); }
    .m-row .m-r-val { flex: 0 0 auto; color: var(--m-ink-2); font-size: var(--m-fs-sm); }

    /* 可折叠卡片（课表"一周概览 + 点开看详情"就用这个） */
    .m-fold > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
    }
    .m-fold > summary::-webkit-details-marker { display: none; }
    .m-fold > summary .m-caret {
        margin-left: auto;
        color: var(--m-ink-2);
        transition: transform .18s ease;
    }
    .m-fold[open] > summary .m-caret { transform: rotate(90deg); }

    /* ---------- ④ 手机上更短的转场 ---------- */
    /* ⚠️ 这里**故意没有**去覆盖 `.nfq-curtain` 的 transition-duration。
       幕布的节奏是 ui.js 里「淡入 0.24s + 240ms 后跳转」配好的一对，
       只在 CSS 里把淡入改短，会出现「幕布淡完了、还要再等 60ms 才跳」的观感倒挂。
       所以手机端的提速放在 ui.js 里（见那边的 `等毫秒`）——
       两边一起改，桌面端仍然是原来的 0.24s / 240ms。 */
}