/* mobile.css — 整站移动端补丁（集中管理，桌面端零影响）
   所有规则都包裹在 @media 中，按断点从宽到窄排列。
   断点约定沿用现有 style.css / site-nav.css / landing.css：1200 / 960 / 900 / 700 / 620 / 520 / 400。 */

/* ============================================================
   ≤1200px：控制台顶栏提前收汉堡
   style.css 要到 ≤900 才收 .nav-links，901–1200px 死区内 7 个链接 +
   右侧工具组互挤、链接文字折成两行撑破 72px 栏高；官网 .l-nav 链接少且
   ≤980 自收，无此问题，故仅提前控制台顶栏的收折断点。
   ============================================================ */
@media (max-width: 1200px) {
  .topnav .nav-links { display: none; }
  .topnav .nav-toggle { display: inline-flex; }
}

/* ============================================================
   ≤960px：settings 折叠面板 + smtp-grid 单栏
   ============================================================ */
@media (max-width: 960px) {
  /* settings.html：分组菜单 .doc-side 被全局隐藏后，用折叠面板替代 Tab 切换。
     保留 [hidden] 属性优先级（邮件服务未启用时仍隐藏）。 */
  .set-sec:not([hidden]) { display: block; }
  .set-sec[hidden] { display: none !important; }

  .set-sec {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 10px;
    background: var(--panel);
    overflow: hidden;
  }
  .set-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
  }
  .set-sec-head::after {
    content: '▾';
    font-size: 12px;
    color: var(--muted);
    transition: transform .2s;
    flex: none;
  }
  .set-sec.collapsed .set-sec-head { border-bottom-color: transparent; }
  .set-sec.collapsed .set-sec-head::after { transform: rotate(-90deg); }
  .set-sec.collapsed .set-sec-body { display: none; }
  .set-sec-body { padding: 14px; }

  /* accordion head 已显示分组标题，内部 .settings-section 子标题去重 */
  .set-sec .settings-section { display: none; }

  /* smtp-grid 两列在窄屏挤压，改单栏；
     用 .share-body 提升特异性，避免被 settings.html 内联 <style> 同特异性覆盖 */
  .share-body .smtp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ≤900px：全站通用（禁止整页横滑、iOS 输入缩放、modal、触控目标、json-mount）
   ============================================================ */
@media (max-width: 900px) {
  /* 整页禁止左右滑动：宽表 / 长词 / 离屏 transform 层不得撑开文档宽度。
     表格、代码块仍在各自容器内横向滚动（.panel overflow-x、pre overflow）。 */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .topnav,
  .l-nav,
  .container,
  .container.wide,
  .container.docs-wrap,
  .container.doc-wrap,
  main.container,
  .reader,
  .comments,
  .panel,
  .stat-grid,
  .page-head,
  .json-edit-head {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 100vw 含滚动条宽度，窄屏上常比 100% 多几像素，改用 100% */
  .container,
  .container.wide,
  .container.docs-wrap,
  .container.doc-wrap {
    max-width: 100%;
  }
  /* 父级 .auth-body 已有左右 padding，卡片用 100% 即可，勿再用 100vw */
  .auth-card,
  .share-gate {
    max-width: 100%;
  }

  /* 登录/注册：验证码行触控高度；脚注换行不撑破；卡与脚注间距 */
  .auth-body .captcha-row {
    align-items: center;
    gap: 8px;
  }
  .auth-body .captcha-row input {
    min-height: 44px;
  }
  .auth-body .captcha-img {
    width: 112px;
    height: 44px;
    aspect-ratio: auto;
    flex: none;
  }
  .auth-body .captcha-row .btn,
  .auth-body .captcha-row .btn-sm {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }
  .auth-foot {
    gap: 6px 12px;
    font-size: 11.5px;
  }
  .auth-card .btn-block {
    min-height: 44px;
  }

  /* iOS Safari 聚焦 input 时若 font-size < 16px 会触发页面缩放，全站统一提升。
     chat.html 已显式设 16px，无冲突；桌面端不受影响。
     注：json_edit .input-ver 等页面内联样式特异性更高，自然抵抗此规则，无需额外例外。 */
  input, select, textarea { font-size: 16px; }

  .container { padding: 0 14px; }

  /* modal 在窄屏占满可用宽度，避免 .modal-lg{width:720px} + padding:24px 在 320px 屏内容区过窄 */
  .modal-overlay { padding: 12px; }
  .modal, .modal-lg, .modal-sm {
    width: 100% !important;
    max-width: 100%;
  }

  /* 触控目标提升到 36px（iOS HIG 建议 44px，但按钮组在窄屏换行过多，折中） */
  .btn-sm { padding: 8px 14px; min-height: 36px; }

  /* json_edit 挂载容器：移动端头部实际更高（.page-head-edit 纵向 + json-edit-head 换行）；
     用 main 提升特异性，避免被 json_edit.html 内联 <style> 同特异性覆盖 */
  main .json-mount { height: calc(100vh - 220px); min-height: 360px; }

  /* 抽屉底部 safe-area（刘海屏手势条） */
  .nav-drawer-links { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .l-nav-drawer-links { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* 未卡片化的宽表：锁在 panel 内横滑，不带动整页 */
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel.panel-cards,
  .panel:has(> .table.table-cards) { overflow-x: visible; }

  /* 卡片行长标题 / 链接强制断行，避免撑破两列网格 */
  .table.table-cards a,
  .table.table-cards .table-card-val {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 历史版本 / MCP 等未走 table-cards 的表：容器内横滑 */
  .revision-table,
  .mcp-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 页头按钮组：内联 style 的 flex 也要允许换行 */
  .page-head > div {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .json-edit-head .input-title {
    min-width: 0;
    flex: 1 1 160px;
  }
}

/* ============================================================
   ≤700px：docs 卡片模式列缺失修复
   ============================================================ */
@media (max-width: 700px) {
  /* style.css 在 ≤1440 隐藏第 7/9/11 列、≤1200 隐藏第 4/5 列。
     卡片行是 display:grid（标签 | 值）。这里必须用 grid 把列显示回来；
     block / flex 都会打乱两列对齐。 */
  .docs-main .table.table-cards td:nth-child(4),
  .docs-main .table.table-cards td:nth-child(5),
  .docs-main .table.table-cards td:nth-child(7),
  .docs-main .table.table-cards td:nth-child(9),
  .docs-main .table.table-cards td:nth-child(11) {
    display: grid;
  }
  /* 桌面短列限宽 160px。卡片行是块级，这个上限会把整行收成窄带；放开宽度后由值列内折行，不向外溢出。 */
  .docs-main .table.table-cards td.cell-clip {
    max-width: none;
    overflow: hidden;
    text-overflow: clip;
  }
  .docs-main .table.table-cards td.cell-clip > .table-card-val {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ============================================================
   ≤620px：landing 字号进一步缩小
   ============================================================ */
@media (max-width: 620px) {
  .l-h1 { font-size: 32px; }
  .l-h2 { font-size: 24px; }

  .auth-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .auth-card:not(.share-gate),
  .auth-split .auth-card {
    padding: 24px 18px 22px;
    border-radius: 16px;
  }
  .auth-split .auth-card::before {
    border-radius: 16px 16px 0 0;
  }
  .auth-title,
  .auth-split .auth-title { font-size: 20px; }
  /* 只调字号：底距由表单 margin-top / .share-gate .auth-sub 负责，避免叠加过大 */
  .auth-sub { font-size: 13px; }
  .auth-alt { margin-top: 14px; font-size: 12.5px; }
}

/* ============================================================
   ≤520px：紧凑 padding + json-mount 再降
   ============================================================ */
@media (max-width: 520px) {
  .container { padding: 0 12px; }
  main .json-mount { height: calc(100vh - 260px); min-height: 320px; }
}

/* ============================================================
   ≤400px：topnav / l-nav 挤压兜底（Galaxy Fold 280px、iPhone SE 320px）
   ============================================================ */
@media (max-width: 400px) {
  .topnav { gap: 4px; padding: 0 10px; }
  .l-nav,
  .l-nav.has-landing-links { gap: 6px; padding: 0 12px; }
  .l-logo { font-size: 14px; max-width: 30vw; }
  .nav-brand a { font-size: 14px; gap: 6px; }
}