/**
 * a7-fallback.css — pg1-a7 安卓7.1.1(Chromium 51/52) CSS 能力降级层
 *
 * 全部用 @supports 特性检测包裹: 现代浏览器(支持对应特性)完全不受影响,
 * 只有老引擎才会命中这些降级规则, 保证"能解析 + 能运行 + 布局可用"。
 *
 * 覆盖的缺口(Chromium 51 缺失):
 *   display:grid(57+) / flex gap(84+) / min()(79+) / aspect-ratio(88+) / inset(87+)
 */

/* ==================================================================
   1) CSS Grid 缺失 (Chromium < 57)
   把页面里 6 处 grid 布局降级为 flex + 等宽子项 + 外边距模拟 gap
   ================================================================== */
@supports not (display: grid) {
  /* 首页功能卡片: 2 列 */
  .feature-cards,
  .guide-grid,
  .tongue-feature-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .feature-cards > *,
  .guide-grid > *,
  .tongue-feature-grid > * {
    -webkit-flex: 0 0 calc(50% - 5px);
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }
  .feature-cards > *:nth-child(odd),
  .guide-grid > *:nth-child(odd),
  .tongue-feature-grid > *:nth-child(odd) {
    margin-right: 10px;
  }
  .feature-cards > *:not(:nth-last-child(-n+2)),
  .guide-grid > *:not(:nth-last-child(-n+2)),
  .tongue-feature-grid > *:not(:nth-last-child(-n+2)) {
    margin-bottom: 10px;
  }

  /* 面诊三要素: 3 列 */
  .face-feature-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .face-feature-grid > * {
    -webkit-flex: 0 0 calc((100% - 20px) / 3);
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
  }
  .face-feature-grid > *:nth-child(3n+1),
  .face-feature-grid > *:nth-child(3n+2) {
    margin-right: 10px;
  }
  .face-feature-grid > *:not(:nth-last-child(-n+3)) {
    margin-bottom: 10px;
  }

  /* 报告顶部信息行: auto 1fr auto 1fr -> 可换行的标签/值序列 */
  .report-user-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: baseline;
    align-items: baseline;
  }
  .report-user-info > * {
    margin-right: 14px;
    margin-bottom: 6px;
  }

  /* 养护建议列表: 单列 + 行距 */
  .advice-grid {
    display: block;
  }
  .advice-grid > * {
    margin-bottom: 14px;
  }
  .advice-grid > *:last-child {
    margin-bottom: 0;
  }
}

/* ==================================================================
   2) min()/max()/clamp() 缺失 (Chromium < 79)
   --tongue-size 用 vmin 兜底 (拍照引导轮廓/镂空尺寸)
   注: 平板等大屏的媒体查询尺寸在旧引擎下统一按手机档处理, 仅尺寸差异不影响功能
   ================================================================== */
@supports not (width: min(1px, 2px)) {
  .camera-guide-overlay,
  .camera-guide-hole,
  .camera-tongue-template {
    --tongue-size: 43vmin;
  }
  .camera-fullscreen.face-mode .camera-guide-overlay,
  .camera-fullscreen.face-mode .camera-guide-hole,
  .camera-fullscreen.face-mode .camera-tongue-template {
    --tongue-size: 64vmin;
  }
}

/* ==================================================================
   3) aspect-ratio 缺失 (Chromium < 88)
   舌象/面部引导框与预览图用显式高度替代
   ================================================================== */
@supports not (aspect-ratio: 1 / 1) {
  .camera-guide-hole,
  .camera-tongue-template {
    height: calc(var(--tongue-size) * 140 / 120);
  }
  .camera-fullscreen.face-mode .camera-guide-hole,
  .camera-fullscreen.face-mode .camera-tongue-template {
    height: calc(var(--tongue-size) * 580 / 478);
  }
  .preview-frame img {
    height: 280px;
  }
}

/* ==================================================================
   4) inset 简写缺失 (Chromium < 87)
   其中 .camera-guide-overlay 是关键: 缺失时蒙层尺寸为 0 -> 拍照引导完全失效
   ================================================================== */
@supports not (inset: 0) {
  .camera-guide-overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  body::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .radar-chart-wrap::before {
    top: 12%;
    right: 12%;
    bottom: 12%;
    left: 12%;
  }
}

/* ==================================================================
   5) 老 WebView 输入修复 (Chromium ≤52 已知 bug)
   "* { -webkit-user-select: none }" 会让 <input> 完全无法编辑
   (软键盘能弹出但打字不上屏)。构建期已将 style.css 的 "*" 规则改写为
   ":not(input)..." 排除式写法; 此处再加一道保险, 显式恢复输入类元素可编辑。
   ================================================================== */
input, textarea, select, option, [contenteditable], [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}