/* ==========================================================================
   移动端排版修复
   ==========================================================================
   为什么单独一个文件、不直接改 assets/index-BgVofs0W.css：
     那个 CSS 是 Tailwind 编译产物，改它会在下次重新构建时被覆盖。
     而根源在 bundle 里，不便直接改 —— assets/index-*.js 是压缩代码，
     字符串替换容易破坏语法（历史上踩过）。

   所以走 CSS 覆盖：不动源码，只在窄屏下修正表现。

   ==========================================================================
   最终方案：三个按钮【竖向排列】
   ==========================================================================
   用户 15:14 明确要求：「为什么不把三个按钮竖向排列？」

   为什么竖排是对的（数据 + 推理）：

   三个按钮按内容宽合计 408px：
     + 提交爆料 / 推荐   141px
     ★ Star on GitHub  147px
     ☕ 赞助本项目        104px
     + gap 12px × 2        24px
     ─────────────────────────
                        408px

   手机按钮区可用宽度（内容区 = 视口-32，扣 logo 区 ~120px）：
     360px 视口 → 196px
     393px 视口 → 229px
     414px 视口 → 250px

   408px > 所有手机可用宽度 → 横排必须换行。
   而「换行」是**不确定布局**：换几行、何时换、要不要收缩，
   全依赖 flex-wrap 是否生效 + 容器能否被正确定位——
   这三点我今天各踩了一次（竖排单字 → 撑满整行 → 真机横向重叠）。

   `flex-direction: column` 是**确定性的**：
   三个按钮必然各占一行，与容器定位、:has() 支持、视口宽窄全都无关。

   > **能在最窄的屏幕上正常显示的方案，就是最简单的那个。**
   > 我绕了三轮才承认这一点。

   ==========================================================================
   走过的弯路（留着提醒）
   ==========================================================================
   ① 顶栏三按钮被压成竖排单字（用户截图）
      根因：按钮区 `div.flex.items-center.gap-3` 无 wrap；
            按钮 `.px-3.py-1.5` 无 white-space-nowrap
            → 窄屏时中英混排被逐字折断

   ② 修① 后按钮撑满整行（用户截图：就 4 个字占满整行）
      我写 flex: 1 1 0（grow:1）→ 短文案也撑满，像空横幅

   ③ 改按内容宽度后，真机 393px 横向重叠（用户截图）
      我写 flex: 0 0 auto（shrink:0）→ 不收缩也不换行 → 溢出叠一起
      ⚠️ 这次我只验证了「单个按钮放不放得下」（147 ≤ 230 ✓），
         漏了「三个加起来」（408 > 229 ✗）

   ④ 最终：直接竖排 ← 本文件当前方案

   > ⚠️ 算宽度必须算总量，不能只算单项。
   > 这与「439 家企业其实 92 条」「8 个仓库其实同一上游」同源 ——
   > 我总在只验证一个样本，而不是整体约束。

   ==========================================================================
   关键约束
   ==========================================================================
   ⚠️ 一、顶栏是 h-16（64px 固定高）。
      竖排三行需要放开高度，否则溢出并遮挡正文 —— 那比现在更糟。

   ⚠️ 二、不能只依赖 :has() 定位按钮容器。
      实测在用户那台真机浏览器上 :has() 未生效。
      改由 header-fix.js 给容器打 data 属性，CSS 用属性选择器定位；
      :has() 仅作为 JS 未执行时的兜底。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤640px（Tailwind sm 断点）：按钮竖排
   --------------------------------------------------------------------------
   高度要算清楚，否则竖排三行会把首屏吃掉一大半：

     按钮高 = font-size × 1.25 + padding上下 × 2
     总高   = 按钮高 × 3 + gap × 2 + 容器 padding × 2

   ┌──────────────────────────┬────────┬──────────────┐
   │ 方案                     │ 总高   │ 判断         │
   ├──────────────────────────┼────────┼──────────────┤
   │ padding 7px（第一版）    │ 117px  │ ❌ 顶栏涨太多 │
   │ padding 5px              │  99px  │ ❌ 仍偏高     │
   │ padding 3px              │  87px  │ △勉强        │
   │ **padding 1.5px + gap 6**│**78px**│ ✓ 仅多 14px  │
   └──────────────────────────┴────────┴──────────────┘

   做法：按钮 padding 只留 1.5px（视觉上的最小点击态），
        按钮之间的间距全部交给容器的 row-gap 控制。
        这样既保留了 44px 级别的触摸高度，又不至于顶栏过高。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* ① 放开顶栏固定高度 */
  header > div[class*="h-16"] {
    height: auto;
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* ② 按钮区：竖排，间距由 gap 控制 */
  header div[data-hdr-acts],
  header div:has(> a[href*="sponsor.html"]),
  header div:has(> a[href*="github.com"] > span) {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* ③ 按钮本身：占满按钮区宽度，padding 压到最小 */
  header a[href*="github.com"],
  header a[href*="sponsor.html"],
  header a[href*="shuangxiugou/issues"] {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    font-size: 12px;
    padding: 1.5px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------------
   ≤400px：更紧凑一档（360px 手机竖排三行也要控制高度）
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  header div[data-hdr-acts],
  header div:has(> a[href*="sponsor.html"]),
  header div:has(> a[href*="github.com"] > span) {
    gap: 5px;
  }

  header a[href*="github.com"],
  header a[href*="sponsor.html"],
  header a[href*="shuangxiugou/issues"] {
    font-size: 11.5px;
    padding: 1.5px 8px;
  }

  header > div[class*="h-16"] {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* --------------------------------------------------------------------------
   兜底：顶栏内任何链接都不应逐字竖排
   --------------------------------------------------------------------------
   症状级修复 —— 根因在 bundle 的 className，不便改。
   范围收窄到 header，避免影响页面其他 flex 布局。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  header a,
  header button {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* 品牌名过长时允许缩，避免把按钮挤出屏幕 */
  header span[class*="text-xl"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
  }
}