/* ==========================================================================
   KK Match · V7.0.2 移动端横向溢出补丁（仅 ≤380px 生效）
   --------------------------------------------------------------------------
   为什么是独立文件而不是改 css/kkos.css、css/kk-cards.css、research.css：
   那三份文件都被 nginx 以 "public, immutable, max-age=2592000"（30 天）
   下发，research.css 的引用甚至连 ?v= 都没有。改内容不换 URL ⇒ 老用户
   30 天看不到修复，形成"半修"状态。新 URL 从未被缓存过，改动立即生效，
   回滚只需摘掉一行 <link>。

   每一条都对应生产页面实测的几何数字（320×700，is_mobile=false），
   不是"看起来没问题"的推测。桌面/平板完全不受影响。
   ========================================================================== */

@media (max-width: 380px) {

  /* G1 · kkos 全线 + voices：右侧导航簇「中 / EN / Sign in / Start」
     实测右边缘 323 > 320。收一档间距与内边距，不动字号与结构。 */
  .nav-right { gap: 6px; }
  .nav-cta { padding: 8px 11px; }
  .nav-signin { padding: 7px 10px; }
  .lang-switch button { padding: 5px 6px; }

  /* G2 · research 列表：main.grid 的 minmax(320px,1fr) 在 320 视口下
     只有一个轨道 320px + 左右各 22px 内边距 ⇒ 卡片右边缘 342，溢出 22px。
     改成 minmax(0,1fr) 让轨道跟随可用宽度。 */
  main.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* G3 · kcc 卡片网格：.kcc-grid.kcc-2 用 minmax(340px,1fr)，
     容器内宽只有 ~276px ⇒ 卡片右边缘 362，溢出 42px。
     320 这个宽度只可能放一列。 */
  .kcc-grid,
  .kcc-grid.kcc-2,
  .kcc-grid.kcc-4 { grid-template-columns: minmax(0, 1fr) !important; }

  /* G3b · sdk/index.html 的 .sdk-2 用 repeat(auto-fit,minmax(320px,1fr))，
     320 视口下 auto-fit 塌成一条 320px 固定轨道，卡片右边缘 342，溢出 22px。 */
  .sdk-2 { grid-template-columns: minmax(0, 1fr) !important; }

  /* G4 · pricing.html 页内 Tailwind 导航：gap-6 = 24px，
     四个链接把 Contact 推到 342，溢出 22px。
     只收间距、不动字号——实测把字号压到 12px 会把触控目标从 28px 压到
     20px，低于 WCAG 2.5.8 的 24px 下限，那是用一个缺陷换另一个缺陷。 */
  header nav.flex.gap-6 { gap: 8px; }

  /* G5 · career.html 页内头部：品牌 + 4 个链接 + 语言按钮，
     语言按钮右边缘 324，溢出 4px。
     注意：语言按钮原来高 23px，已经低于 WCAG 2.5.8 的 24px 下限；
     这里顺手补到 25px，不靠压小它来腾空间。 */
  header nav { gap: 8px; }
  /* 语言按钮的 padding 写在元素的行内 style 里，行内样式优先级高于类选择器，
     不加 !important 根本改不动。顺带把 23px 的高度补到 25px。
     不动 font-size：它也在行内样式里，写了也是死代码。 */
  header nav .langbtn { padding: 8px 9px !important; }

  /* G6 · app.html 头部右侧簇（语言选择 + 头像）超宽 10px。
     头像与语言标签都不承担信息密度，缩尺寸最省事且不动布局语义。 */
  #headerAvatarWrap { width: 32px !important; height: 32px !important; }
  #langSelectorWrapper .flex { gap: 3px !important; }
  header .flex.items-center.gap-4 { gap: 5px !important; }

  /* G7 · kkos-algorithms.html 的 table.checks 没有任何滚动容器，
     表格最小宽度 360px，右边缘 382，溢出 62px ⇒ 最后一列永远看不见。
     让表格自己成为横向滚动容器（display:block 后内部仍是表格布局）。 */
  table.checks {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* G8 · mirror-profile.html 的 canvas 写死 300px 宽，
     加上容器内边距后右边缘 330，溢出 10px。 */
  canvas#radar { max-width: 100%; height: auto; }

  /* G9 · 研究文章正文里的长 token（DOI / 连续数字）不换行，
     把行盒撑宽 5px。只在窄屏允许任意断行。 */
  .prose { overflow-wrap: anywhere; }

  /* G10 · careers.html / partners.html 页脚链接行：6 个 <a> 之间没有空白
     字符，浏览器找不到换行点，最后一个链接右边缘 364（溢出 58px）。
     改成可换行的 flex 行，间距用 gap 显式给出。 */
  .links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
  }
  .links a { margin-right: 0; }
}