/* ============================================================
   kory-compat.css  v2
   针对较老 Chromium 内核（搜狗等）的兼容层

   原则：
   1) 会改变布局的规则，尽量做成「内容放不下才生效」
   2) 需要无条件生效的，先确认在现代浏览器里几何量不变
   ============================================================ */

/* ---------- 1. 阻止旧内核把小于 12px 的字号自动放大 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 2. 侧栏标签行：一行放不下时换行，不溢出卡片 ---------- */
.proto-sc-tags {
  flex-wrap: wrap;
}

.proto-sc-tags > .proto-sc-tag {
  max-width: 100%;
}

/* ---------- 3. 侧栏查重行：放不下时按钮换行，不溢出卡片 ---------- */
/* 列间距收到 0：按钮本来就靠 margin-left:auto 顶到右端，
   所以现代浏览器里外观与间距完全不变，只是给文字让出了余量 */
.proto-sc-report {
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 4px;
}

.proto-sc-report > .proto-sample-link {
  margin-left: auto;
}

/* ---------- 4. 三栏网格：锁死左栏宽度，避免被放大后的文字撑宽整页 ---------- */
/* 现代浏览器里左栏 auto 计算出来就是 248px，锁定后几何量不变；
   旧内核把字号放大后 auto 会跟着变宽，整页因此出现横向滚动 */
@media (min-width: 1361px) {
  .form-page-grid.proto-fast,
  .form-page-grid.proto-pro {
    grid-template-columns: minmax(0, 248px) var(--proto-showcase-w) minmax(0, 1fr) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1360px) {
  .form-page-grid.proto-fast,
  .form-page-grid.proto-pro {
    grid-template-columns: minmax(0, 248px) minmax(0, 1fr) !important;
  }
  .form-page-grid.proto-fast .form-page-grid__form,
  .form-page-grid.proto-pro .form-page-grid__form {
    grid-column: 2 !important;
    max-width: 100% !important;
  }
}

.form-page-grid > * {
  min-width: 0;
}

/* ---------- 5. inset 简写的等价四边写法 ---------- */
.hero-bg,
.hero-grid,
.dialog-overlay,
.modal-overlay,
.nav-overlay,
.cs-step-lb,
.cs-realtime-bar__stripe {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ---------- 6. aspect-ratio 缺失时的兜底 ---------- */
@supports not (aspect-ratio: 1 / 1) {
  .cs-frame {
    height: 240px;
    max-height: 72vw;
  }
}

/* ---------- 7. clamp() 缺失时的字号兜底 ---------- */
@supports not (font-size: clamp(1rem, 2vw, 3rem)) {
  .title-line {
    font-size: 2rem;
  }
  .hero-title .title-line:first-child {
    font-size: 1.6rem;
  }
}

/* ---------- 8. 首页 Pearson 热力图：单列长条的真凶 ---------- */
/* 原样式里 .heat-matrix 用的是：
     grid-template-columns: subgrid;
     grid-template-rows: subgrid;
   subgrid 需要 Chromium 117+，旧内核不认，这两条被丢弃后
   .heat-matrix 退化成「一个默认单列网格」，100 个格子竖着堆，
   就成了贯穿整个页面的那条长带子。
   这里用 repeat() 显式铺开行列，恢复成 10×10 矩阵 */
@supports not (grid-template-columns: subgrid) {
  .heat-matrix {
    grid-template-columns: repeat(var(--n, 10), var(--cell-size));
    grid-template-rows: repeat(var(--n, 10), var(--cell-size));
  }

  .heat-cell {
    aspect-ratio: 1;
    width: var(--cell-size);
    height: var(--cell-size);
  }
}

/* 旧内核不认 clamp() 时补一个固定格子尺寸，避免变量替换后非法 */
@supports not (width: clamp(1px, 1vw, 2px)) {
  .heat-chart__body {
    --cell-size: 26px;
    --label-col: 26px;
  }

  .heat-chart__body {
    max-width: 100%;
  }
}

/* ---------- 9. 渐变文字无法裁剪时退回实色，避免变成色块 ---------- */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-accent,
  .gradient-text,
  [class*="text-gradient"] {
    -webkit-text-fill-color: currentColor;
    color: #2563eb;
    background: none;
  }
}