/* ==========================================================================
   override.css —— 最后加载的覆盖层
   --------------------------------------------------------------------------
   为什么要单独一个文件：
     codex-concept.css 在 index.html 里排在最后，任何与它**同优先级**的规则
     都会被它盖掉 —— 不管我写在 refine.css 的哪一段。
     移动端顶栏这一块我已经因为这个原因连续踩了三次坑：
       · .nav-actions{display:none}      藏在 @media(max-width:700px)
       · .header{height:72px}            藏在 @media(max-width:700px)
       · .navlinks a{padding:29px 0}     干脆没包 media query
     与其到处把选择器写得更长去赌特异性，不如把「与 Codex 规则直接冲突」
     的修正集中到这一个文件，并在 HTML 里排在 codex-concept.css 之后。
     同优先级、后加载 → 稳定生效，规则本身也保持可读。

   本文件只放"覆盖 Codex"的规则。我自己的新增功能（弹窗、合伙人板块、
   样品专区等）仍然留在 refine.css。
   ========================================================================== */

/* --------------------------------------------------------------------------
   移动端顶栏重构
   --------------------------------------------------------------------------
   客户反馈：① 手机上品牌标语不见了  ② 切语言必须打开汉堡菜单
   实测（390px 屏，容器 343px）：
     语言切换器 ≈ 82px、汉堡按钮 54px、logo 154px → 第一行放得下
     标语 131px 放不下 → 换到第二行
   布局：
     第一行 [logo] ………………… [中|RU|EN] [菜单]
     第二行 [从棉田到衣橱]（仅中文版）

   断点取 1000px 而不是 700px：
     site.css 的汉堡菜单在 ≤1000px 触发，导航一旦收起来，第一行就腾出了空间
     —— 701~1000px 这一段同样放得下第二行的标语，不该漏掉。

   1001~1250px 是唯一的空档：导航完整横排，实测需 1245px 而容器只有 1104px，
   确实塞不下标语，只能隐藏；到 1280px 又放得下，会重新出现。
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  .header{height:auto}
  .nav{height:auto;flex-wrap:wrap;gap:10px;padding:9px 0 8px}

  /* 语言切换器回到第一行可见区 */
  .nav-actions{display:flex;margin-left:auto;gap:0;order:2}
  .nav-actions .btn-small{display:none}      /* 询盘按钮仍交给页面 CTA */
  .nav-actions .lang-switch{margin-right:10px}

  .nav .brand{order:1}
  .nav .menu-btn{margin-left:0;order:3}

  /* 标语换到第二行 */
  html[lang="zh-CN"] .brand-slogan{
    display:flex;
    order:10;
    flex-basis:100%;
    align-items:center;
    padding-left:0;
    margin:5px 0 0;
    border-left:0;
  }
  html[lang="zh-CN"] .brand-slogan img{height:24px;width:auto;display:block}

  .navlinks{top:100%}   /* 菜单从顶栏底部展开，不再写死 68px */
}

/* 窄屏逐级压缩，保证第一行不挤爆 */
@media(max-width:400px){
  .nav .brand{width:126px}
  .nav-actions .lang-switch{margin-right:8px}
  .nav .lang-switch button{padding:4px 5px;font-size:.72rem}
}
@media(max-width:340px){
  .nav .brand{width:112px}
  .nav .lang-switch button{padding:3px 4px;font-size:.68rem}
}

/* ==========================================================================
   条款弹窗正文在 Safari 下空白 —— 修复
   --------------------------------------------------------------------------
   现象：Chrome 正常；Safari 里弹窗的标题、说明、按钮都在，唯独正文一片空白，
        但右侧能看到滚动条。

   原因（两处叠加）：
     ① `-webkit-overflow-scrolling: touch`
        这个属性在 Safari 13+ 已经废弃，而且有已知 bug：它会给滚动容器创建
        独立的合成层，导致层内内容不绘制 —— 表现正是"有滚动条、没内容"。
        现代 Safari 的惯性滚动本来就是默认行为，这个属性纯属多余。

     ② flex 子项的 `min-height` 默认值是 `auto`
        在 Safari 里，`min-height:auto` 的 flex 子项不允许被压缩到小于内容高度，
        配合 `flex:1` + `overflow:auto` 会算出异常尺寸。必须显式写 `min-height:0`。

   修法：去掉已废弃属性；给滚动容器补 `min-height:0`。
        本文件在 codex-concept.css 之后加载，但 .doc-body 只由 refine.css 定义，
        这里同优先级后加载即可覆盖。
   ========================================================================== */
.doc-body{
  -webkit-overflow-scrolling:auto;   /* 显式关掉废弃属性 */
  min-height:0;                      /* Safari flex 子项必需 */
}

/* 双保险：若 Safari 对 <dialog> 的 display:flex 处理仍有差异，
   改用 grid 定行，minmax(0,1fr) 等价于 flex 场景下的 min-height:0 */
.doc-dialog[open]{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
/* 关闭按钮是绝对定位，不占 grid 行；head/body/foot 各占一行 */
.doc-dialog > .dialog-close{position:absolute}