/* ============================================================================
   16 手机端排版（≤768px）
   ----------------------------------------------------------------------------
   桌面版一行放得下的东西，手机上必须换行、放大、收敛。这一层只做四件事：
   ① 顶栏拆成两行：品牌 + 按钮一行，四个标签一行横滑（不再挤成 178px 高）；
   ② 手指尺寸：按钮 → 44/46px，输入框 → 46/48px 且字号 16px（iOS 上 <16px 会
      自动放大页面）；
   ③ 卡片：倾斜减半、胶带往内收，保证旋转后四个角仍在屏幕里；
   ④ 兜底 overflow-x: clip —— 手机上永远不出现左右拖动。
   只改排版，不动任何业务逻辑与主题色；颜色全部走已有令牌。
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* ---------- 兜底：任何情况下都不要横向滚动 ---------- */
  html,
  body {
    overflow-x: clip;
  }

  /* ---------- 顶栏：两行网格 ---------- */
  .topbar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand side"
      "tabs tabs";
    gap: var(--sp-2) 0;
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .brand {
    grid-area: brand;
    font-size: var(--fs-md);
  }

  .brand__mark {
    width: 24px;
    height: 24px;
  }

  .topbar__side {
    grid-area: side;
  }

  /* 四个标签一条横向滑带：不换行，也不再纵向吃掉半屏 */
  .tabs {
    grid-area: tabs;
    flex-wrap: nowrap;
    gap: var(--sp-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-base);
  }

  /* ---------- 顶栏按钮：都能一指点中 ---------- */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .space-open {
    min-height: 44px;
    padding-inline: var(--sp-2);
  }

  /* ---------- 内容区：留白收紧但不贴边 ---------- */
  .page {
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
  }

  .view__head {
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  .view__title {
    font-size: var(--fs-xl);
  }

  .view__sub {
    font-size: var(--fs-sm);
  }

  /* 双列在 1040px 就已经并成一列，这里只收间距 */
  .cols {
    gap: var(--sp-4);
  }

  /* 正文在手机上要保持 17px：前一层 720px 的老规则会把它压到 15px，这里拉回来 */
  .entry__body {
    font-size: var(--fs-md);
    line-height: var(--lh-base);
  }

  /* ---------- 手指尺寸：按钮、筛选片、输入框 ---------- */
  .btn {
    min-height: 46px;
  }

  .chip {
    min-height: 40px;
    padding-inline: var(--sp-3);
  }

  .entry__more {
    min-height: 40px;
    padding-inline: var(--sp-3);
  }

  .field__input {
    min-height: 46px;
  }

  /* 手机输入框一律 16px：小于 16px 时 iOS Safari 会自动把页面放大 */
  .field__input,
  .field__input--area,
  .field__select,
  input,
  textarea,
  select {
    font-size: 16px;
  }

  .field__input--area {
    min-height: 132px;
  }

  /* ---------- 卡片：倾斜减半、胶带内收，转完仍在屏幕里 ---------- */
  .entries > .entry:nth-child(odd),
  .mini-list > .mini:nth-child(odd),
  .qas > .qa:nth-child(odd) {
    --tilt: -.3deg;
    --nudge: 0px;
    --lift: 0px;
  }

  .entries > .entry:nth-child(even),
  .mini-list > .mini:nth-child(even),
  .qas > .qa:nth-child(even) {
    --tilt: .28deg;
    --nudge: 0px;
    --lift: 0px;
  }

  .entries > .entry:nth-child(n)::before,
  .mini-list > .mini:nth-child(n)::before,
  .qas > .qa:nth-child(n)::before {
    --tape-x: 12px;
    --tape-w: 56px;
    --tape-rot: -3deg;
  }

  .qa__block::before {
    right: var(--sp-3);
    width: 44px;
  }

  /* ---------- 我的空间：整屏抽屉 ---------- */
  .space {
    width: 100%;
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }

  /* ---------- 登录页：卡片留白收一点，按钮占满一行 ---------- */
  .gate__card {
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4);
  }

  .gate__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---------- 页脚 ---------- */
  .foot {
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
  }
}

/* 小屏（iPhone SE 一代 / 320px）：再挤就只留图标 */
@media screen and (max-width: 430px) {
  /* 390px 上四个标签要一行放得下：字小一号、计数贴片收窄 */
  .tab {
    gap: var(--sp-1);
    padding: 0 var(--sp-2);
    font-size: var(--fs-sm);
  }

  .tab__count {
    min-width: 18px;
    padding: 0 5px;
    line-height: 17px;
  }
}

@media screen and (max-width: 380px) {
  .space-open__text {
    display: none;
  }

  .brand {
    font-size: var(--fs-base);
  }
}

/* 页脚底部给右下角悬浮按钮让位，避免备案信息被挡住 */
@media screen and (max-width: 768px) {
  .foot {
    padding-bottom: calc(var(--sp-7) + 56px);
  }
}