/* ============================================================
   R21 无障碍增强样式（a11y.css）
   ------------------------------------------------------------
   基线红线：全部规则限定在 html[data-a11y-*]（开关开启才命中）
   或 .cx-a11y-*（面板自身类）作用域内 —— 全部开关关闭时本文件的
   任何一条规则都不会生效，站点视觉与上线前字节一致。
   叠加优先级：高对比度 > 自定义主题（照片取色）> 默认主题。
   减少动效双通道块分别位于 style.css（×4）与 media-player.css（×1），
   与各文件既有 @media (prefers-reduced-motion: reduce) 并列。

   第 5 批（R29/R21 叠加防线）：
   本文件是 L0' 覆写层 —— style.css 新增的任何色彩/线/阴影变量
   必须同步进下方 html[data-a11y-contrast="1"] 的 !important 块，
   否则高对比度会被新视觉穿透。
   不覆写的 4 组 token 及理由（评审留证）：
   - --radius/--radius-sm/--radius-pill：形状与对比度语义无关，
     覆写会让「高对比度 = 变方角」成为新争议；
   - --dur-*/--ease：时长由「减少动效」通道（data-a11y-motion）管，
     与对比度正交；
   - --space-*/--fs-*/--font-*：度量 token，不影响色彩对比；
   - --z-*：层级 token，不影响色彩对比。
   ============================================================ */

/* ---------- 字号三档（Q5 定案：局部缩放，不改根字号） ----------
   白名单：正文阅读区 / 评论与留言列表 / 表单控件 / 说明性文字。
   卡片标题、图标、布局骨架不缩放。 */

html[data-a11y-font="2"] { --a11y-font-scale: 1.125; }
html[data-a11y-font="3"] { --a11y-font-scale: 1.25; }

/* 正文阅读区（博客阅读页 .prose） */
html[data-a11y-font] .prose { font-size: calc(16px * var(--a11y-font-scale, 1)); }
html[data-a11y-font] .prose h1 { font-size: calc(clamp(22px, 4vw, 32px) * var(--a11y-font-scale, 1)); }
html[data-a11y-font] .prose h2 { font-size: calc(21px * var(--a11y-font-scale, 1)); }
html[data-a11y-font] .prose h3 { font-size: calc(17px * var(--a11y-font-scale, 1)); }
html[data-a11y-font] .reader-meta { font-size: calc(13px * var(--a11y-font-scale, 1)); }

/* 评论 / 留言列表（comments.js 与留言板共用 gb- 前缀类） */
html[data-a11y-font] .gb-list { font-size: calc(16px * var(--a11y-font-scale, 1)); }
html[data-a11y-font] .gb-note { font-size: calc(12px * var(--a11y-font-scale, 1)); }

/* 说明性文字 */
html[data-a11y-font] .contact-intro { font-size: calc(14px * var(--a11y-font-scale, 1)); }

/* 表单控件（可读文本，放大字号不改变布局骨架的盒模型） */
html[data-a11y-font] input,
html[data-a11y-font] select,
html[data-a11y-font] textarea { font-size: calc(16px * var(--a11y-font-scale, 1)); }

/* ---------- 高对比度（data-a11y-contrast="1"）----------
   整体接管色彩类变量；核心变量带 !important 兜底，压过 theme.js
   写入的内联样式（防任何时序竞态；a11y.js 另有门控见模块注释）。 */
html[data-a11y-contrast="1"] {
  --bg: #000 !important;
  --bg-alt: #000 !important;
  --bg2: #000 !important;
  --panel: #000 !important;            /* 第 5 批新增 */
  --panel-2: #000 !important;          /* 第 5 批新增 */
  --text: #fff !important;
  --text-dim: #c8c8c8 !important;
  --dim: #c8c8c8 !important;
  --accent: #4dd8ff !important;
  --accent2: #a78bfa !important;
  --card: #0a0a0a !important;
  --glass: #0a0a0a !important;
  --border: #8f95a3 !important;
  --card-border: #8f95a3 !important;
  --line: #8f95a3 !important;          /* 第 5 批新增：1px 线在强光下需 3:1+ */
  --line-strong: #8f95a3 !important;   /* 第 5 批新增 */
  --hairline: #8f95a3 !important;      /* 第 5 批新增 */
  --nav-bg: #000 !important;
  --grid-line: transparent !important; /* 第 5 批新增：刻度网格属装饰，必须消失 */
  --code-bg: #000 !important;          /* 第 5 批新增 */
  --code-text: #fff !important;        /* 第 5 批新增 */
  --glow: none !important;             /* 第 5 批新增：无发光 */
  --hero-grad: none !important;        /* 第 5 批新增：无渐变 */
  --shadow-strong: none !important;    /* 第 5 批新增：无投影 */
  color-scheme: dark;
}
/* 链接强制下划线：仅靠颜色区分不够，形态也要兜底 */
html[data-a11y-contrast="1"] a { text-decoration: underline; }
/* 边框实线化（虚线/半透明边框在强光下不可辨） */
html[data-a11y-contrast="1"] a,
html[data-a11y-contrast="1"] button,
html[data-a11y-contrast="1"] input,
html[data-a11y-contrast="1"] select,
html[data-a11y-contrast="1"] textarea { border-style: solid; }
/* 焦点环加粗到 3px */
html[data-a11y-contrast="1"] :focus-visible { outline: 3px solid #4dd8ff !important; outline-offset: 2px; }

/* ---------- 无障碍面板自身样式（.cx-a11y-* 前缀，独立于站点主题） ---------- */
.cx-a11y-btn {
  position: fixed; right: 22px; bottom: 140px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--card-border, var(--border, rgba(255, 255, 255, 0.16)));
  background: var(--bg-alt, #0a0e1a); color: var(--accent, #37d6a8);
  font-size: 20px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.cx-a11y-btn:hover { border-color: var(--accent, #37d6a8); }
.cx-a11y-btn[aria-expanded="true"] { border-color: var(--accent, #37d6a8); }

.cx-a11y-panel {
  position: fixed; right: 22px; bottom: 196px; z-index: 901;
  width: 264px; padding: 16px 14px; border-radius: var(--radius, 6px);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.16));
  background: var(--bg-alt, #0a0e1a); color: var(--text, #e8ecf8);
  box-shadow: var(--shadow-modal, 0 24px 70px rgba(0, 0, 0, 0.6));
}
.cx-a11y-panel h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: 1px; }
.cx-a11y-group { margin: 0 0 12px; }
.cx-a11y-group-label { display: block; font-size: 12px; color: var(--text-dim, #8a93ad); margin-bottom: 6px; }
.cx-a11y-seg { display: flex; gap: 6px; }
.cx-a11y-opt {
  flex: 1; padding: 7px 0; font-size: 12px; text-align: center; cursor: pointer;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16)); border-radius: var(--radius-sm, 4px);
  background: transparent; color: var(--text, #e8ecf8);
}
.cx-a11y-opt[aria-checked="true"] {
  border-color: var(--accent, #37d6a8); color: var(--accent, #37d6a8);
  background: color-mix(in srgb, var(--accent, #37d6a8) 8%, transparent);
}
.cx-a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 10px; margin: 4px 0; font-size: 13px; text-align: left;
  cursor: pointer; border-radius: var(--radius-sm, 4px); border: 1px solid transparent;
  background: transparent; color: var(--text, #e8ecf8);
}
.cx-a11y-row:hover { background: rgba(255, 255, 255, 0.05); }
.cx-a11y-state { font-size: 11px; color: var(--text-dim, #8a93ad); }
.cx-a11y-row[aria-checked="true"] { border-color: var(--accent, #37d6a8); }
.cx-a11y-row[aria-checked="true"] .cx-a11y-state { color: var(--accent, #37d6a8); }
.cx-a11y-foot { margin: 10px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--text-dim, #8a93ad); }
.cx-a11y-panel :focus-visible { outline: 3px solid var(--accent, #37d6a8); outline-offset: 2px; }