/* ============================================================
   墨笔 · 网页端宽屏皮肤 (web.css)
   ------------------------------------------------------------
   原则：只「覆盖」，不改 styles.css 任何一行。
   - 窄屏（手机浏览器打开网页端）→ 完全走原样式，与 App 端一致
   - 宽屏（电脑浏览器）→ 拆掉 430px 手机窄带，铺满可用宽度

   被覆盖的原样式（共 6 处写死宽度）：
     styles.css:50   #app          max-width:430px   ← 窄带根因
     styles.css:101  .tabbar       max-width:430px
     styles.css:115  .dockbar      max-width:430px
     styles.css:341  .sheet        max-width:430px
     styles.css:462  .gen-dock     max-width:430px
     styles.css:511  .cover-panel  max-width:430px
   ============================================================ */

:root{
  --web-max: 1240px;   /* 内容区最大宽度（电脑） */
}

/* 超宽屏再放宽一档 */
@media (min-width:1600px){
  :root{ --web-max: 1440px; }
}

/* 网页端标题字重感：补一档中文衬线兜底，不依赖外部字体 */
@media (min-width:900px){

  /* ---------- 1) 拆掉「手机窄带」 ---------- */
  #app{
    max-width:var(--web-max);
    box-shadow:0 0 0 1px rgba(43,38,34,.06);
  }

  /* ---------- 2) 三条固定栏跟随内容区宽度 ---------- */
  .tabbar,.dockbar,.gen-dock{ max-width:var(--web-max); }
  .tabbar{ justify-content:center; }
  .tab{ flex:0 1 170px; }

  /* ---------- 3) 浮层：限宽居中，不再贴边拉满 ---------- */
  .sheet{ max-width:640px; }
  .cover-panel{ max-width:640px; }
  .modal{ max-width:460px; }

  /* ---------- 4) 留白与行宽：宽屏下内容不贴边 ---------- */
  .scroll{ padding-left:32px; padding-right:32px; }
  .topbar{ padding-left:20px; padding-right:20px; }
  .cp-head{ padding-left:20px; padding-right:20px; }

  /* ---------- 5) 大纲页顶部「同步大纲」：宽屏下居中，别拉成一条横幅 ---------- */
  .syncbar{ justify-content:center; }
  .osync-btn{ max-width:230px; }
  #outlineSyncStatus{ text-align:center; }
}

/* 中等宽（平板/小笔记本）：只松开窄带，不改留白 */
@media (min-width:760px) and (max-width:899px){
  #app{ max-width:700px; }
  .tabbar,.dockbar,.gen-dock{ max-width:700px; }
}