/* ================================================================
   第二十阶段 · 可访问性与体验增强（独立覆盖层，不进玻璃样式文件）
   目标：向 WCAG 2.1 AA 靠拢 —— 焦点可见、键盘可达、动效可减、
        字号可调、触摸够大、安全区不挡、弹窗有焦点陷阱。
   ================================================================ */

/* ---------------- 1) 跳过导航链接 ----------------
   默认视觉隐藏（仍在 tab 序列里），Tab 第一下聚焦时滑入左上角 */
.skip-link {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: 0 0 14px 14px;
  background: var(--gl-accent-ink, #2d6e62);
  color: #fff !important;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transform: translateY(-110%);
  transition: transform .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}
/* skip 目标被跳转聚焦时不显示难看的 outline，由浏览器负责滚动 */
#main:focus { outline: none; }

/* ---------------- 2) 屏幕阅读器专用（视觉隐藏，AT 可读） ---------------- */
.sr-only,
.ax-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- 3) 键盘焦点可见（鼠标点击不显示，Tab 一定显示） ----------------
   全站交互点统一 3px 高对比描边；黄色外框在亮/暗背景上都够醒目 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.nav-links a:focus-visible,
.chip:focus-visible,
.pg:focus-visible,
.rbtn:focus-visible,
.like-btn:focus-visible,
.fb-fab:focus-visible,
.ax-fab:focus-visible,
.ax-top:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 玻璃样式给输入框用 box-shadow 模拟焦点，补一条实线保证 3:1 焦点指示对比度 */
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
.pet-input:focus-visible,
.gb-input:focus-visible,
.gb-nick:focus-visible {
  outline: 3px solid #ffb703 !important;
  outline-offset: 1px;
}
/* 汉堡按钮的三横线 span 本身不可聚焦，焦点给 button 即可 */
.nav-toggle:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 3px;
}
/* 键盘打开下拉时，父项保持高亮，让 SR 用户知道菜单归属 */
.has-submenu > a[aria-expanded="true"] {
  background: rgba(255, 255, 255, .55);
}
html[data-theme-dark] .has-submenu > a[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
}

/* ---------------- 4) 字号档位（正常 / 大 / 更大） ----------------
   全站文字多为 px 写死，改根字号无效；用 zoom 整页等比放大，
   效果等同浏览器缩放（布局/图片一起放大，不会错位）。
   不支持 zoom 的老浏览器退化为根字号放大（对 rem/em 文字有效）。 */
html[data-font="large"] { zoom: 1.12; font-size: 112%; }
html[data-font="xlarge"] { zoom: 1.25; font-size: 125%; }
@supports not (zoom: 1) {
  html[data-font="large"] body { font-size: 1.0625rem; }
  html[data-font="xlarge"] body { font-size: 1.125rem; }
}

/* ---------------- 5) 高对比度模式（用户在工具条手动开启） ----------------
   不靠媒体查询（Windows 高对比主题浏览器会自己换色），这是给
   「眼神不好但没开系统高对比」的用户：加深描边、提亮文字、收掉半透明 */
html[data-contrast="high"] body {
  --ink: #111418;
  --ink-soft: #2b323a;
  --ink-faint: #44505c;
  --line: #6b7682;
}
html[data-contrast="high"][data-theme-dark] body,
html[data-contrast="high"][data-theme-dark] {
  --ink: #f4f7fb;
  --ink-soft: #d7dee8;
  --ink-faint: #b3bdc9;
  --line: #93a0af;
}
html[data-contrast="high"] body .panel,
html[data-contrast="high"] body .glass-card,
html[data-contrast="high"] body .shop-card,
html[data-contrast="high"] body .book-card,
html[data-contrast="high"] body .work-card,
html[data-contrast="high"] body .post-item,
html[data-contrast="high"] body .track-card,
html[data-contrast="high"] body .site-nav,
html[data-contrast="high"] body .nav-links .submenu {
  border-width: 2px !important;
}
html[data-contrast="high"] body .btn,
html[data-contrast="high"] body .btn-ghost,
html[data-contrast="high"] body .chip,
html[data-contrast="high"] body .rbtn {
  border-width: 2px !important;
  font-weight: 700;
}
html[data-contrast="high"] body .ink-soft,
html[data-contrast="high"] body .lede,
html[data-contrast="high"] body p { text-shadow: none; }
/* 系统强制高对比（Windows 高对比主题）：把自定义描边交还给系统调色板 */
@media (forced-colors: active) {
  .skip-link { background: Canvas; color: ButtonText !important; border: 2px solid ButtonText; }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid Highlight; }
  .btn-primary { forced-color-adjust: none; background: Highlight; color: Canvas; }
}

/* ---------------- 6) 减少动效（prefers-reduced-motion） ----------------
   glass.css 只关掉了卡片过渡，这里全站收口：动画/平滑滚动/视频自动播放提示。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-art, .frame { transform: none !important; }
}
/* 默认开启平滑滚动（锚点跳转 / 回到顶部），但只在允许动效时 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------- 7) 触摸目标 ≥ 44×44px（粗指针设备） ---------------- */
@media (pointer: coarse) {
  .nav-links a,
  .chip,
  .pg,
  .rbtn,
  .like-btn,
  .post-actions .act,
  .post-share-btn,
  .footer a,
  .nu-logout {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  /* 图标按钮（无文字）保证方形热区 */
  .like-btn, .post-share-btn { padding: 10px; }
}

/* ---------------- 8) 刘海屏 / 底部手势条安全区 ---------------- */
.site-nav { padding-top: env(safe-area-inset-top); }
.player-bar,
.aplayer.aplayer-fixed .aplayer-body {
  padding-bottom: env(safe-area-inset-bottom);
}
.fb-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---------------- 9) 无障碍工具条（左下角，避开右下角反馈浮窗） ---------------- */
.ax-fab,
.ax-top {
  position: fixed;
  left: 18px;
  z-index: 998;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gl-card-stroke, rgba(255, 255, 255, .55));
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  padding: 0;
}
.ax-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
.ax-fab:hover, .ax-top:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
html[data-theme-dark] .ax-fab,
html[data-theme-dark] .ax-top {
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
}
.ax-top {
  bottom: calc(76px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}
.ax-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (max-width: 768px) {
  .ax-fab, .ax-top { width: 44px; height: 44px; left: 12px; }
}

.ax-panel {
  position: fixed;
  left: 18px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 999;
  width: 268px;
  max-width: calc(100vw - 36px);
  border-radius: 20px;
  padding: 16px 16px 14px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--gl-card-stroke, rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
  color: var(--ink);
  display: none;
}
.ax-panel.open { display: block; }
html[data-theme-dark] .ax-panel { background: rgba(28, 32, 42, .92); }
.ax-panel h2 {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.ax-row { margin-bottom: 12px; }
.ax-row:last-child { margin-bottom: 0; }
.ax-row > span.ax-label {
  display: block;
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 600;
}
.ax-seg {
  display: flex;
  gap: 6px;
  background: rgba(127, 127, 127, .1);
  border-radius: 12px;
  padding: 3px;
}
.ax-seg button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 4px;
  border-radius: 9px;
  cursor: pointer;
  min-height: 40px;
}
.ax-seg button[aria-pressed="true"] {
  background: var(--gl-accent, #7fd8c2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.ax-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .84rem;
  cursor: pointer;
}
.ax-switch input { width: 18px; height: 18px; accent-color: var(--gl-accent, #2f7a68); }
.ax-note {
  margin: 10px 0 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------------- 10) aria-live 区域 / 加载态 ---------------- */
/* 加载中通用样式：骨架屏统一微光（尊重 reduced-motion） */
[aria-busy="true"] { cursor: progress; }
.skeleton {
  background: linear-gradient(90deg, rgba(127, 127, 127, .12) 25%, rgba(127, 127, 127, .22) 37%, rgba(127, 127, 125, .12) 63%);
  background-size: 400% 100%;
  border-radius: 10px;
  animation: ax-shimmer 1.4s ease infinite;
}
@keyframes ax-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: rgba(127, 127, 127, .16); }
}

/* ---------------- 11) 弹窗焦点陷阱期间，陷阱外不可 Tab（由 a11y.js 切 inert） ---------------- */
body.ax-modal-open { overflow: hidden; }

/* ---------------- 12) 阅读舒适度：长文行宽与行高 ---------------- */
.prose,
.legal-body,
.post-content {
  line-height: 1.85;
  letter-spacing: .01em;
}
.prose p, .prose li { max-width: 46em; }

/* ---------------- 13)  prefers-reduced-transparency：收毛玻璃（与 glass.css 一致补全） ---------------- */
@media (prefers-reduced-transparency: reduce) {
  .ax-panel, .ax-fab, .ax-top, .fb-box, .fb-fab {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme-dark] .ax-panel,
  html[data-theme-dark] .fb-box { background: #1c202a !important; }
}