/* responsive.css — 移动端优先适配 */

/* ≤ 900px：目录进抽屉，出现底部导航条 */
@media (max-width: 900px) {
  .toc { display: none; }
  .mobile-nav { display: flex; }
  .content { padding: var(--s4) var(--s4) 120px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .api-card dl { grid-template-columns: 1fr; gap: 0; }
  .api-card dt { margin-top: var(--s2); }
  .env-form { grid-template-columns: 1fr; }
  .tl-label { width: 5.5em; font-size: 11px; }
  .tl-axis { margin-left: calc(5.5em + var(--s2)); }
  .pager { flex-direction: column; }
  .sheet { padding-left: var(--s4); padding-right: var(--s4); }
}

@media (min-width: 901px) {
  .drawer, .drawer-backdrop { display: none !important; }
  .menu-btn { display: none; }
}

/* 窄手机（≤ 400px） */
@media (max-width: 400px) {
  .content { padding-left: var(--s3); padding-right: var(--s3); }
  pre { font-size: 12.5px; padding: var(--s3); }
  .sim .sim-body { padding: var(--s3); }
  .lab > .lab-body { padding: var(--s3); }
  .quiz .q { padding: var(--s3); }
}

/* 防横向溢出兜底：用 clip 而非 hidden——hidden 会把 body 变成滚动容器，
   破坏 .app-header 与 .toc 的 position: sticky */
html, body { max-width: 100%; overflow-x: clip; }
.content > * { min-width: 0; }

/* 打印 */
@media print {
  .app-header, .toc, .mobile-nav, .drawer, .sheet, .sim-controls { display: none !important; }
  .content { max-width: none; }
}