/* ==========================================================================
   全屏自适应缩放 · supplier-ui-scale.css
   ==========================================================================
   要解决的问题
   ------------
   站内所有尺寸都写成绝对 px（正文 11–12、辅助 9–10、卡片与间距都是定值），
   页面整体不随屏幕变大而变大。五档屏实测过（2560 / 1920 / 1536 / 1366 / 390），
   各档算出来的字号完全一样 —— 所以这不是 viewport 或缩放的毛病，而是
   「绝对像素不随屏变」：同样是 12px，在 2560 的屏上占的视口比例只有设计时
   假设的 1600 宽窗口的六成多，观感就是「打开看着内容很小」。

   做法
   ----
   按屏幕宽度给整页一个等比放大倍率（zoom），只放大、不改任何一条既有尺寸。
   站内 px 值一律当作「设计稿坐标」原样保留，倍率一改，版式内部各处比例
   不变，不会出现「字号放大了但行高没跟上」这类错位。

     · ≤1679px 完全不动 —— 笔记本、分屏与改造前逐像素一致；
     · 从 1680px 起逐档加大。基准取 1600 设计宽，倍率 = 屏宽 / 1600，
       量化成阶梯后夹在 1 ~ 2 之间，不管屏幕多宽，实际排版宽度都落在
       1450 ~ 1920 之间。

       屏宽           倍率     实际排版宽
       < 1680         1.00     < 1680
       1680–1919      1.10     1527–1745
       1920–2239      1.25     1536–1791
       2240–2559      1.40     1600–1828
       2560–3199      1.55     1651–2064
       3200–3839      1.75     1828–2194
       ≥ 3840         2.00     ≥ 1920

   ⚠️ 为什么后面还要一长串 vh / vw 覆写
   ------------------------------------
   zoom 会把「长度」一起放大（写 100px，渲染成 100 × 倍率），
   但 vh / vw 换算出来的是真实视口，不参与缩放 —— 也就是 100vh 在 1.55 倍下
   会渲染成 1.55 个屏幕高。所以凡是拿 vh / vw 当「屏幕有多大」用的地方，
   都要把倍率除回来。实测（2560×761 视口、倍率 1.5）不加这段的两个后果：

     · .app{min-height:100vh} 量到 1142px（视口只有 761px），
       页面底下凭空多出一条 381px 的空白滚动；
     · .product-modal{max-height:calc(100vh - 48px)} 量到 1070px，
       弹窗比屏幕还高，上下两头都在屏幕外。

   覆写统一收在 @media (min-width:1680px) 里，两个原因：
   1. 倍率只在 ≥1680 生效，与站内既有的窄屏断点（1050 / 760 / 720 / 520）
      没有任何重叠 —— 不会踩「后写的规则静默压掉窄屏规则」的顺序陷阱；
   2. < 1680 时本文件一条规则都不生效，改造前的表现可以逐像素复现。

   外面套 @supports (zoom: 1)：万一浏览器不认 zoom（老 Firefox），
   倍率会停在 1，下面所有 calc(100vh / var(--ui-scale)) 自动退化成原式，
   整站与改造前完全一样，不会因为「除了倍率没缩」而把版式压矮。

   两点实现细节（改之前先读）
   --------------------------
   · 必须写在 body 上而不是 html 上：zoom 落在 body 时，站内那一批
     position:fixed;inset:0 的全屏弹层仍然精确铺满视口（实测 2536×761 一分不差），
     提示条 bottom:38px 也按倍率一起放大。
   · 站内 JS 有两处混用了两套坐标系（详见 supplier-ui-export.js 的 position()
     与 concept-ice.html 的 fitRows）：getBoundingClientRect / window.innerWidth
     报的是屏幕坐标，offsetWidth / 写回去的 style.left 是排版坐标 —— 差一个倍率。
     这两处已同步除以倍率，以后新增「量完再回写 px」的逻辑时同样要注意。
   ========================================================================== */

body { --ui-scale: 1; }

@supports (zoom: 1) {

  /* ── 倍率阶梯 ────────────────────────────────────────────────────────
     升序书写：屏宽同时命中多条时，最后写的（倍率最大的那条）生效。 */
  @media (min-width: 1680px) { body { --ui-scale: 1.10; } }
  @media (min-width: 1920px) { body { --ui-scale: 1.25; } }
  @media (min-width: 2240px) { body { --ui-scale: 1.40; } }
  @media (min-width: 2560px) { body { --ui-scale: 1.55; } }
  @media (min-width: 3200px) { body { --ui-scale: 1.75; } }
  @media (min-width: 3840px) { body { --ui-scale: 2.00; } }

  @media (min-width: 1680px) {
    body { zoom: var(--ui-scale); }

    /* ── 页面骨架 ─────────────────────────────────────────────────────── */
    .app  { min-height: calc(100vh / var(--ui-scale)); }
    .side { min-height: calc(100vh / var(--ui-scale)); }
    /* 「企业档案」页把整页锁进视口（concept-ice.css 的 page-directory 版式）。
       它写的是 height:100vh，不除回来整页会比屏幕高一个倍率、底部被裁掉。 */
    body.page-directory .app { height: calc(100vh / var(--ui-scale)); }

    /* ── 登录 / 注册 ──────────────────────────────────────────────────── */
    .login-page { min-height: calc(100vh / var(--ui-scale)); }

    /* ── 弹窗：高度按「屏幕的百分之几」写的那批，都要除回来 ─────────────── */
    .company-modal       { max-height: calc(90vh / var(--ui-scale)); }
    .admin-modal         { max-height: calc(90vh / var(--ui-scale)); }
    .taxonomy-dialog     { max-height: min(690px, calc(92vh / var(--ui-scale))); }
    .share-panel         { max-height: min(680px, calc(86vh / var(--ui-scale))); }
    .product-modal       { max-height: calc(100vh / var(--ui-scale) - 48px); }
    .cert-viewer-sheet   { max-height: calc(100vh / var(--ui-scale) - 48px); }
    .product-crop-dialog { max-height: calc(100vh / var(--ui-scale) - 44px); }

    /* ── 浮层 / 下拉：宽度不能顶出屏幕 ────────────────────────────────── */
    .export-panel { max-width: calc(100vw / var(--ui-scale) - 24px);
                    max-height: min(780px, calc(87vh / var(--ui-scale))); }
    .export-toast { max-width: min(560px, calc(100vw / var(--ui-scale) - 32px)); }
    .filter-menu  { max-width: min(268px, calc(42vw / var(--ui-scale))); }
    .filter-menu.sort-menu { max-width: min(240px, calc(64vw / var(--ui-scale))); }

    /* ── 招采网入口的长表格：留白留给「页头 + 标题 + 表头」那一坨，
          那一坨本身会被一起放大，所以只把 vh 那一项除回来 ───────────────── */
    .platform-table-wrap { max-height: calc(100vh / var(--ui-scale) - 356px); }
  }
}