/* ============================================================
   万花筒计划 · 设定维基   mobile.css
   手机 / 小平板适配层（在 style.css 之后加载，同优先级时覆盖它）

   ≤900px 时：
   - 左侧分区栏变成「抽屉」：☰ 开、✕ / 点遮罩 / 点链接 / 回退 关
   - 顶栏从三层收成一行，搜索变成点头部放大镜才展开的浮层
   - 按钮、列表、目录全部放大到手指能点，正文留白收紧
   - 刘海屏 / 底部横条用 env(safe-area-inset-*) 让开
   ============================================================ */

/* ---------- 全局小加固（任何宽度都安全） ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:hidden}
#app{min-height:100vh;min-height:100dvh}
img,video,canvas{max-width:100%}
.p-body img,.post-b img,.msg-b img,.eprev img{height:auto}
.mnav-btn,.msearch-btn,.mnav-x,.mnav-ov,.mnav-acts{display:none}

/* ---------- ≤900px：手机布局 ---------- */
@media (max-width:900px){
  body{-webkit-tap-highlight-color:transparent}

  /* --- 顶栏：只剩一行 --- */
  #topbar{
    flex-wrap:nowrap;gap:7px;padding:8px 10px;
    padding-top:calc(8px + env(safe-area-inset-top));
  }
  .mnav-btn,.msearch-btn{
    display:inline-flex;align-items:center;justify-content:center;
    flex:none;min-width:38px;min-height:38px;padding:6px 9px;line-height:1;font-size:16px;
  }
  .brand{gap:8px;min-width:0;flex:1 1 auto}
  #eyeMini{width:50px;height:27px;border-radius:8px;flex:none;max-width:none}
  .brand-txt{min-width:0}
  .brand-txt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-txt em{display:none}
  /* 复位 style.css ≤680 那条「按钮平分整行」：手机顶栏只有一行，按钮按内容宽 */
  .top-actions{margin-left:auto;gap:6px;flex:0 0 auto;width:auto;flex-wrap:nowrap}
  .top-actions .btn{padding:9px 10px;font-size:13px;min-height:38px;flex:0 0 auto;white-space:nowrap}
  .ub-txt{display:none}
  #userBox{padding-left:4px}

  /* --- 搜索：点头部放大镜才展开 --- */
  .searchbox{display:none;max-width:none;margin-left:0}
  body.msearch-open .searchbox{
    display:flex;position:absolute;left:0;right:0;top:100%;z-index:120;margin:0;
    padding:9px 10px;background:linear-gradient(180deg,#2C1D14,#241811);
    border-bottom:1px solid #40291B;box-shadow:0 12px 26px rgba(40,22,10,.34);
  }
  #search{font-size:16px;padding:11px 15px 11px 36px}
  .search-panel{max-height:66vh}

  /* --- 侧栏 → 左侧抽屉 --- */
  #sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:210;
    width:min(86vw,330px);height:100vh;height:100dvh;max-height:none;
    padding:calc(10px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom));
    border-right:1px solid var(--line2);border-bottom:none;
    box-shadow:16px 0 44px rgba(56,32,12,.3);
    transform:translateX(-104%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  body.mnav-open #sidebar{transform:none}
  body.mnav-open{overflow:hidden}
  .side-hd{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 8px}
  .mnav-x{
    display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    border:1px solid var(--line2);border-radius:11px;background:#FFFDF8;color:var(--ink2);
    font:inherit;font-size:15px;cursor:pointer;flex:none;
  }
  .mnav-ov{
    display:block;position:fixed;inset:0;z-index:205;background:rgba(46,28,14,.46);
    opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;
  }
  body.mnav-open .mnav-ov{opacity:1;visibility:visible}
  .mnav-acts{
    display:flex;flex-wrap:wrap;gap:7px;padding:2px 8px 11px;margin-bottom:7px;
    border-bottom:1px dashed var(--line2);
  }
  .mnav-acts .btn{flex:1 1 0;min-width:0;padding:10px 8px;font-size:13px;text-align:center;justify-content:center}

  /* 抽屉里全部换成手指尺寸 */
  .zone-hd{padding:11px 9px;font-size:14.5px}
  .pitem{padding:10px 11px;font-size:14.5px}
  .grp{margin:11px 0 3px 10px}
  .sf-chk{padding:10px 9px}
  .linkbtn{padding:9px 12px;font-size:13px}
  #sideFoot{margin-top:12px}

  /* --- 正文区留白 --- */
  #main{padding:16px 13px calc(72px + env(safe-area-inset-bottom))}
  #view{max-width:none}
  .home-bar{margin:16px 2px 12px}
  .hero{grid-template-columns:1fr}
  .hero-txt{grid-column:1;grid-row:2;padding:6px 20px 26px}
  .eye-big{grid-column:1;grid-row:1;min-height:196px}
  .hero-title{font-size:31px}
  .hero-sub{margin-bottom:14px}
  .sec-h{margin:22px 0 10px}
  .p-wrap{flex-direction:column;gap:16px}
  .toc{position:static;width:100%;flex:none;max-height:none;order:-1}
  .toc-i{padding:9px 10px;font-size:13.5px}
  .toc-i.lv3{padding-left:18px;font-size:13px}
  .toc-i.lv4{padding-left:28px;font-size:12.5px}
  .page{padding:16px 15px 22px;border-radius:16px}
  .p-title{font-size:26px;margin:4px 0 8px}
  .p-body{font-size:15.6px}
  .p-body h2{font-size:20px}
  .p-body h2,.p-body h3,.p-body h4,.p-body h5{scroll-margin-top:70px}
  .pbar{gap:8px}
  .pacts{width:100%;margin-left:0}
  .p-foot{margin-top:20px}
  .zhead{padding:16px;gap:12px}
  .zhead .zi.big{width:40px;height:40px;border-radius:12px;font-size:18px}
  .zhead h1{font-size:21px}
  .zh-acts{margin-left:0;width:100%;justify-content:flex-start}
  .zone-cards,.plist,.stat-grid{grid-template-columns:1fr}
  .plist{gap:9px}
  .pcard,.ritem,.urow{min-height:46px}
  .md-pre{font-size:12.4px;padding:12px 13px}
  .md-tablewrap{-webkit-overflow-scrolling:touch}
  .md-table{font-size:13px}
  .md-table th,.md-table td{padding:8px 11px}

  /* --- 编辑器 --- */
  .egrid{grid-template-columns:1fr}
  .earea{min-height:320px;padding:14px 15px;font-size:13px}
  .eprev{padding:4px 15px 18px}
  .ebar,.etools,.efoot{padding-left:12px;padding-right:12px}
  .ebar-l{min-width:0;flex:1 1 100%}
  .ebar-r{flex:1 1 100%;justify-content:flex-end}
  .etitle{font-size:17px}
  .tb{padding:8px 11px;font-size:13px}

  /* --- 弹窗：接近全屏 --- */
  .overlay{padding:14px;align-items:center}
  .modal,.modal.wide{width:100%;max-width:100%;max-height:86vh;max-height:86dvh;padding:18px 16px;border-radius:16px}
  .minput,.ci,.tin,.etitle{font-size:16px}   /* ≥16px，iOS 聚焦时不会自动放大整页 */
  .tin{width:104px}

  /* --- 社交 / 用户抽屉 --- */
  .udrawer{width:100%;max-width:100%;z-index:230}
  .ud-ov{z-index:225}
  .prof-grid,.eh-list{grid-template-columns:1fr}
  .msg{max-width:94%}
  .chat-msgs{max-height:none;min-height:180px}
  .grp-pick{max-height:52vh}
  .qq-qr{margin:0 auto}
  .qq-info{min-width:0}
  .urow-b{width:100%;justify-content:flex-end}
  .rate-btns .rb{width:30px;height:30px}
  .cmt-t,.post-hd-t,.post-b{min-width:0;word-break:break-word}

  /* --- 按钮统一放大到可点 --- */
  .btn{min-height:40px;padding:10px 14px;font-size:13.8px}
  .btn-sm{min-height:34px;padding:8px 11px;font-size:12.8px}

  /* --- 提示条整宽 --- */
  .toasts{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));align-items:stretch;z-index:240}
  .toast{max-width:none;font-size:13.5px;padding:12px 15px}

  /* --- 右键菜单 / 看大图 --- */
  .ctx{min-width:200px}
  .ctx-i{padding:11px 13px;font-size:14.5px}
  #bigImg{padding:2vh 2vw}
}

/* ---------- ≤560px：小屏再紧一点 ---------- */
@media (max-width:560px){
  .hero-title{font-size:26px}
  .p-title{font-size:23px}
  #topbar{gap:5px;padding-left:8px;padding-right:8px}
  .top-actions .btn{padding:9px 8px}
  .brand-txt b{font-size:14.5px}
  #eyeMini{width:44px;height:24px}
  #main{padding:14px 11px calc(72px + env(safe-area-inset-bottom))}
  .page{padding:14px 13px 20px}
  .zhead{padding:14px}
}

/* ---------- ≤400px：只留站名，把宽度让给按钮 ---------- */
@media (max-width:400px){
  #eyeMini{display:none}
  .brand-txt b{font-size:14px}
  .top-actions .btn{padding:9px 7px}
}

/* ---------- 打印：抽屉相关全部忽略 ---------- */
@media print{
  .mnav-btn,.msearch-btn,.mnav-x,.mnav-ov,.mnav-acts{display:none !important}
  #sidebar{position:static !important;transform:none !important;width:auto !important;
    max-width:none !important;height:auto !important;box-shadow:none !important;overflow:visible !important}
}