@charset "UTF-8";
/* ==========================================================================
   GTAmap — 打磨层 / Polish layer
   --------------------------------------------------------------------------
   只做**增量增强**，不覆盖任何既有规则的核心行为；全部规则要么是新增选择器，
   要么是浏览器默认行为的显式声明。加载顺序：放在 style.css 之后。
      · 锚点偏移（sticky 顶栏不再遮挡 #锚点目标）
      · 选区/滚动条/焦点可见性（可读性与可发现性）
      · 字体渲染、数字等宽、长词换行（中英文混排可读性）
      · 触控目标、横向滚动（移动端可点性）
      · 渐进增强：text-wrap / prefers-contrast / 打印
      · 兼容兜底：不支持 gap / grid / sticky 的旧引擎
   无外部依赖，离线可用。 / Additive only, no external dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 锚点落点 / Anchor offsets
   sticky 顶栏高 62px：直接跳到 #section 会把标题压在顶栏下面。
   scroll-margin-top 让所有可跳转目标自动让出顶栏高度 + 一点呼吸空间。
   -------------------------------------------------------------------------- */
:target,
[id] {
  scroll-margin-top: 84px;
}
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 92px; }
@media (max-width: 900px) {
  :target, [id] { scroll-margin-top: 76px; }
  h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 84px; }
}

/* --------------------------------------------------------------------------
   2. 选区 / Selection（品牌色，深浅色各自可读）
   -------------------------------------------------------------------------- */
::selection { background: var(--brand); color: var(--brand-contrast); }
::-moz-selection { background: var(--brand); color: var(--brand-contrast); }

/* --------------------------------------------------------------------------
   3. 滚动条 / Scrollbars（可见但不喧宾夺主；火狐用标准属性）
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.table-wrap, .code-block pre, .doc-article pre, pre {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
  .table-wrap::-webkit-scrollbar, .code-block pre::-webkit-scrollbar { height: 9px; }
}

/* --------------------------------------------------------------------------
   4. 字体渲染与排版细节 / Typography polish
   -------------------------------------------------------------------------- */
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis-weight: none;
}
/* 长英文单词/长 URL/长文件名不撑破容器 */
h1, h2, h3, h4 { overflow-wrap: break-word; }
p, li, td, th, dd, dt, figcaption, .card-body { overflow-wrap: break-word; }
code, .mono, .sha, .file-path { overflow-wrap: anywhere; }

/* 标题折行更均衡（新引擎生效，旧引擎忽略，不产生副作用） */
h1, h2 { text-wrap: balance; }
.lead, .section-head p, .def-box p { text-wrap: pretty; }

/* 正文行宽：超长行会影响阅读，给纯文本段落一个上限 */
.section-head p, .notice p, .card-body p { max-width: 78ch; }

/* 数字统一等宽，表格纵向对齐 */
.data-table td.num, .data-table th.num, .stat-value, .grade-count, .mono-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 下划线偏移，避免中英混排时被笔画吃掉 */
a, abbr[title] { text-underline-offset: 0.18em; }

/* --------------------------------------------------------------------------
   5. 交互与可点性 / Interaction & tap targets
   -------------------------------------------------------------------------- */
button, [role="button"], summary, select, label[for], .btn {
  cursor: pointer;
}
/* iOS 点击高亮改为品牌色浅底，避免整块变蓝 */
a, button, summary, label, .pill, .nav-link {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--brand) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  a, button, summary, label, .pill, .nav-link { -webkit-tap-highlight-color: rgba(11, 107, 107, 0.18); }
}
/* 触屏设备放大触控目标（≥44px 起） */
@media (pointer: coarse) {
  .btn, .pill, .theme-toggle, .nav-toggle, .copy-btn, .copy-btn-inline {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-link { min-height: 44px; }
  .pill-row { gap: 0.5rem; }
  .data-table td, .data-table th { padding-top: 0.85rem; padding-bottom: 0.85rem; }
}
/* 鼠标悬停设备上给卡片一点抬升反馈（触屏不触发） */
@media (hover: hover) and (pointer: fine) {
  .card, .stat-card, .audience {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }
  .card:hover, .stat-card:hover, .audience:hover {
    box-shadow: var(--shadow-md);
  }
}

/* 焦点可见性：为不支持 :focus-visible 的旧引擎补回 outline */
@supports not selector(:focus-visible) {
  a:focus, button:focus, select:focus, input:focus, textarea:focus,
  summary:focus, [tabindex]:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   6. 表格可读性 / Table readability
   -------------------------------------------------------------------------- */
/* 斑马纹：长表格里跟行更容易（与既有 hover 高亮并存） */
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.data-table tbody tr:nth-child(even):hover { background: var(--surface-2); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .data-table tbody tr:nth-child(even) { background: var(--surface-2); }
}
/* 单元格内的长代码/路径允许换行，避免整张表被撑宽 */
.data-table td .mono, .data-table td code, .data-table td .file-path {
  white-space: normal;
  word-break: break-word;
}
/* 表头在横向滚动容器内保持粘顶（既有 sticky 的显式兜底） */
.table-wrap { max-width: 100%; }

/* 代码块：等宽字体栈 + 允许双击选中整行（可读/可复制） */
.code-block pre, pre {
  -webkit-overflow-scrolling: touch;
  font-variant-ligatures: none;
}
.copy-btn, .copy-btn-inline { user-select: none; }

/* --------------------------------------------------------------------------
   7. 无障碍与偏好 / A11y preferences
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); --text-muted: var(--text); }
}
/* 键盘导航时给跳转链接更大的可见性 */
.skip-link:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. 打印 / Print（在既有 print 规则之上补排版细节）
   -------------------------------------------------------------------------- */
@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.78em; color: #444; }
  .data-table { font-size: 0.8rem; min-width: 0 !important; }
  .table-wrap { overflow: visible; border-color: #999; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  table, pre, .card, .notice { page-break-inside: avoid; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   9. 旧引擎兼容兜底 / Legacy fallbacks
   -------------------------------------------------------------------------- */
/* 不支持 flex gap 的引擎（Safari < 14.1）：用 margin 补齐间距 */
@supports not (gap: 1rem) {
  .site-nav > * + * { margin-left: 0.25rem; }
  .pill-row > * { margin: 0.2rem 0.4rem 0.2rem 0; }
  .footer-grid > * { margin-bottom: 1.5rem; }
  .grid > * { margin-bottom: 1.25rem; }
}
/* 不支持 CSS Grid 的引擎：退化为单列块级堆叠，保证可读（不追求美观） */
@supports not (display: grid) {
  .grid, .grid-2, .grid-3, .grid-4, .split, .stat-grid,
  .audience-grid, .footer-grid, .scenario, .doc-layout {
    display: block;
  }
  .grid > *, .split > *, .stat-grid > *, .audience-grid > * { margin-bottom: 1.25rem; }
}
/* 不支持 sticky 的引擎：顶栏回到文档流，避免遮住内容 */
@supports not (position: sticky) {
  .site-header { position: relative; }
}
/* 不支持 backdrop-filter 的引擎：顶栏用不透明底（可读性优先） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--surface); }
}

/* --------------------------------------------------------------------------
   10. 国家下载清单 / Country download catalog
   12 列清单在通用 1180px 正文容器中会被挤出横向滚动。宽屏单独扩展此区，
   以固定列宽在可用视口内展示完整表格；窄屏保留原有横向滚动。
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  #countries > .container { max-width: 1800px; }
  #countries .table-wrap > .data-table.table-wide {
    min-width: 0;
    table-layout: fixed;
  }
  #countries .data-table th,
  #countries .data-table td { padding-inline: 0.6rem; overflow-wrap: anywhere; }
  #countries .data-table th { white-space: normal; }
  #countries .data-table td.row-title { white-space: normal; }
  #countries .data-table th:nth-child(1) { width: 13%; }
  #countries .data-table th:nth-child(2) { width: 7%; }
  #countries .data-table th:nth-child(3) { width: 7%; }
  #countries .data-table th:nth-child(4) { width: 8%; }
  #countries .data-table th:nth-child(5) { width: 4%; }
  #countries .data-table th:nth-child(6) { width: 6%; }
  #countries .data-table th:nth-child(7) { width: 5%; }
  #countries .data-table th:nth-child(8) { width: 8%; }
  #countries .data-table th:nth-child(9) { width: 5%; }
  #countries .data-table th:nth-child(10) { width: 17%; }
  #countries .data-table th:nth-child(11) { width: 10%; }
  #countries .data-table th:nth-child(12) { width: 10%; }
}