/* 手机优化 */
/* ================= 手机优化 ================= */
@media (max-width:640px){
  /* 排序 / 画质 / 状态 / 资源：下拉框保持自然宽度，整行横向滑动（和上面的筛选行一样）；
     总数统计单独一行、不跟着滑：占满整行网格（span 5 ≥ 工具项个数），再粘在左边 */
  .toolbar{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:auto auto;gap:6px 14px;overflow-x:auto;scrollbar-width:none}
  .toolbar label{grid-row:1;display:flex;align-items:center;white-space:nowrap}
  .toolbar label span{flex:none}
  .toolbar .stats{grid-row:2;grid-column:1 / span 5;justify-self:start;position:sticky;left:0;display:block;width:auto;margin:0;white-space:nowrap}
  .topbar{padding:8px 12px}
  .brand-text span{display:none}
  .wrap{padding:12px 12px 48px}
  .vp-bar{padding:6px 8px 8px}
  .vp-ctrls{gap:0}
  .vp-vol input{width:52px}
  .vp-time{font-size:11px}
  .ia{height:34px;padding:0 11px;font-size:12.5px}
  .info-actions{flex-wrap:wrap;gap:8px}
  .info-card{padding:14px;gap:14px}
  .info-plot{font-size:13.5px}
  .foot{font-size:11px;text-align:center;padding:18px 14px 26px}
  .shorts-side{bottom:88px}
  .shorts-side .sb{width:42px;height:42px}
  .shorts-name{font-size:15px}
  .shorts-bottom{right:64px}
  .set-btns{flex-wrap:wrap}
}

/* ================= 手机：表单与颜色 ================= */
/* .field 在 880px 以下改成「标签在上、输入框在下」（见 users-editing.css）。
   各处又按自己的场景给标签设了固定宽度 / 34px 行高、给输入框设了 flex 宽度，在纵向布局里全都不合适：
   flex:1 会把输入框的高度压成内容高度（18px），flex:0 0 Npx 会变成 N 像素高，align-items:flex-start 让输入框不撑满。
   这里放在最后，统一收尾 */
@media (max-width:880px){
  .field{align-items:stretch}
  .field > span,.settings-dialog .field > span,.ol-dialog .field > span,.ol-opts .field > span,.db-fields .field > span{width:auto;line-height:1.4}
  .field input,.field select,.field textarea{flex:none;min-width:0}
  .field > input,.field > select,.field > .ol-fv > input,.field > .ol-fv > select,.field > .ol-fv > textarea{width:100%}
  .field #editYear,.ol-dialog input.short{flex:none;width:110px}
  .db-fields .lib-select{flex:none}
  /* 页面元素里的拖动手柄（16px 宽）和编辑铅笔（20px 宽）手指很难点中：加宽到 24px（WCAG 2.2 的最低要求） */
  .grip,.cfg-item .grip{width:24px}
  .cfg-item button{min-width:24px}
}

/* 手机屏幕小，常在户外或低亮度下看：三级文字（标签、提示、计数、占位文字）对底色的对比度提到 4.5:1 以上。
   桌面端保持原来的颜色 */
@media (max-width:880px){
  :root{--faint:#7d8490}
  :root[data-theme="light"]{--faint:#687080}
  :root[data-theme] .foot{color:var(--faint)}
  .field input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
}

/* 分页：窄屏固定成一行「上一页 [第 p / N 页] 下一页」，统计另起一行；不再按页码多少折行 */
@media (max-width:720px){
  .pager{gap:8px}
  .pager .pg-num,.pager .pg-gap{display:none}
  .pager .pg-jump{display:block;flex:1.4 1 0;min-width:0;padding:0 24px 0 8px;
    background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a93a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .pager .pg-where{display:none}   /* 中间的下拉已经显示了「第 p / N 页」 */
  .pager .pg.prev,.pager .pg.next{flex:1 1 0;min-width:0;padding:0 6px;white-space:nowrap}
  .pager .pg-info{flex:0 0 100%;margin:2px 0 0;text-align:center}
}

/* 设置 → 安全：说明文字和控件在窄屏上上下排，数字框靠左 */
@media (max-width:640px){
  .set-pane[data-pane="security"] .switch-row:has(.num-row,.seg,.chk-group,select.num){flex-wrap:wrap}   /* 左文右开关的行不折，数字框 / 分段选择放到文字下面 */
  .set-pane[data-pane="security"] .seg{flex-wrap:wrap;max-width:100%}
  .set-pane[data-pane="security"] .num-row{width:100%}
}