/* ============================================================
   无障碍与系统偏好层
   ------------------------------------------------------------
   专门处理「用户主动打开的系统开关」：降低动效 / 降低透明度 /
   强制颜色（Windows 高对比）/ 键盘焦点 / 更高对比度。

   ★ 为什么必须单独一个文件、且排在最后加载：
     要覆盖的对象散落在各组件里，而且是写死值 —— .nav-shell 与 .foot-glass
     各自写了自己的 rgba 渐变与 backdrop-filter，.step / .panel 又各写了一份
     小模糊，首页极光与 glitch 的 animation 全在 hero.css 里。
     只有排在 tokens → base → components → blog → transition **之后**，
     才能在同等特异性下用"后写覆盖先写"的方式盖住它们，不必满篇 !important
     地逐个改组件（那样反而会把设计意图打散）。
   ============================================================ */

/* ============================================================
   0. 「跳到主要内容」链接（2026-10-13 排查补上）
   ------------------------------------------------------------
   键盘/读屏用户进站后第一个可聚焦元素。平时移出视口（**不能用 display:none
   或 visibility:hidden** —— 那样它也会从 Tab 序列里消失，等于没做）；
   :focus 时浮到左上、套用全站的品牌焦点评级（金描边，与 .nav-cta 同源）。
   ★ HTML 侧在 header.php 输出，且**只在有 <main id="main"> 的页面输出**
     （首页是全屏 hero，没有 main 地标 —— 指到不存在的锚点比不做更糟）。
   ============================================================ */
.skip-link{position:fixed;z-index:200;top:-100px;left:24px;
  padding:10px 16px;border-radius:10px;font-family:var(--mono);font-size:12px;letter-spacing:1px;
  color:#221400;background:var(--brand);text-decoration:none;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:top .18s ease}
.skip-link:focus{top:16px;outline:2px solid var(--brand-hi);outline-offset:2px}

/* ============================================================
   1. 降低动效（prefers-reduced-motion:reduce）
   ------------------------------------------------------------
   JS 侧已由 config.js 的 REDUCED_MOTION 统一分发（地球、星空、灯光、
   数字滚动、进度条、转场都会读它）。这一层负责 CSS 侧的动画。
   ★ 用「压到极短时长」而不是 animation:none ——
     本站多处入场动画的终态才是"可见"状态（.pt-item 基态 opacity:0，
     靠 animation ... both 收尾）。直接 none 会让元素停在 opacity:0，
     内容凭空消失。给 .01ms 是"瞬间到位"，最稳。
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* 纯氛围动画：直接停掉并归位，避免停在某个中间帧 */
  #day .sun::after{animation:none;opacity:0}
  .aurora{animation:none !important}
  .left-col h1.glitch::after{animation:none;opacity:0}
  .nav-shell::after{display:none}
  .badge .dot,.nav-cta .live-dot,.ops-strip .k i{animation:none;opacity:1}
  /* 悬停时的位移/缩放也一并去掉：它们同样属于"动" */
  .card:hover,.post-card:hover,.pnav:hover{transform:none}
  .partner:hover{transform:none}
  .btn-fuel:hover,.submit:hover,.loadmore:hover{transform:none}
  .post-card:hover .post-thumb img{transform:none}
  .post-card:hover .more span,.card:hover::before,.post-card:hover::before{transition:none}
}

/* ============================================================
   2. 降低透明度（prefers-reduced-transparency:reduce）
   ------------------------------------------------------------
   macOS「辅助功能 → 显示 → 降低透明度」以及部分 Windows 设置会置位。
   本设计的全部观感建立在玻璃上，但"看不清"优先于"好看"：
   换成高不透明底 + 关掉模糊，层级仍由边框与内高光承担。
   ★ 注意这里必须逐个点名组件，不能只覆盖 --glass-*：
     导航、页脚、步骤卡、hero 侧栏面板各自写死了自己的渐变与模糊。
   ============================================================ */
@media (prefers-reduced-transparency:reduce){
  .glass,.card,.kpi,.post-card,.nav-shell,.foot-glass,.step,.panel,
  .ops-strip,.loadmore,.btn-ghost,.btn-wa,.panel-acts .pa,
  aside.blog-side .widget,.pager .page-numbers{
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
    background:rgba(13,15,18,.95) !important;
    border-color:rgba(5,217,232,.30) !important;
  }
  .field input,.field textarea,.field select,
  .comment-form input,.comment-form textarea,
  aside.blog-side input,aside.blog-side select,aside.blog-side textarea,
  .search-form input[type=search],.mode-switch .ms{
    background:rgba(24,28,34,.97) !important;
    border-color:rgba(5,217,232,.26) !important;
  }
  /* 背景装饰层此时只能从面板缝隙里露出来，压暗以免和正文抢注意力 */
  .bg-fx .glow{opacity:.3}
  #scan,.bg-fx .scan{opacity:.16}
}

/* ============================================================
   3. 强制颜色 / 高对比（forced-colors:active）
   ------------------------------------------------------------
   Windows 高对比模式会剥夺所有作者颜色 —— 玻璃、渐变、发光全部失效。
   此时唯一还能表达结构的是系统关键字颜色（Canvas / CanvasText /
   Highlight / LinkText / ButtonFace）。不写这一层，重玻璃 UI 会糊成一团。
   ============================================================ */
@media (forced-colors:active){
  .glass,.card,.kpi,.post-card,.nav-shell,.foot-glass,.step,.panel,
  .ops-strip,.loadmore,.btn-ghost,.btn-wa,.panel-acts .pa,aside.blog-side .widget,.pager .page-numbers{
    background:Canvas;border:1px solid CanvasText;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  }
  /* 左侧 .rail 是本站的"状态色条"，它承载语义（不是装饰）→ 用 Highlight 保下来 */
  .rail,.nav-shell::before,.sec-head .bar,.tl .item::before,.tl .item::after,
  .bar-row .fill,.ops-strip .k i,.badge .dot,.nav-cta .live-dot{
    background:Highlight;forced-color-adjust:none;box-shadow:none;
  }
  .btn-fuel,.submit,.nav-cta,.loadmore,.search-form .search-submit{
    background:ButtonFace;color:ButtonText;border:1px solid ButtonText;box-shadow:none;
  }
  a{color:LinkText}
  a:hover{color:Highlight}
  .card:hover,.post-card:hover{transform:none}
  /* 文本渐变/发光在强制颜色下只会变成灰块 */
  .page-head h1,.left-col h1,.kpi .val,.empty-state .code{text-shadow:none}
}

/* ============================================================
   4. 更高对比度（prefers-contrast:more）
   ------------------------------------------------------------
   系统要求提高对比时，把次级文字整体提亮一档、把细线加粗。
   做法是覆盖 token 而不是逐个改组件 —— 因为全站文本色都取自这几个变量。
   ============================================================ */
@media (prefers-contrast:more){
  :root{
    --dim:#aab8c8;
    --ink-2:#d3dde7;
    --glass-brd:rgba(5,217,232,.45);
    --ctl-brd:rgba(5,217,232,.42);
    --line-tech:rgba(5,217,232,.34);
  }
  .sec-head,.archive-head{border-bottom-color:rgba(5,217,232,.4)}
  .crumbs,.post-meta,.crumb{color:var(--ink-2)}
}

/* ============================================================
   5. 键盘焦点：全站兜底
   ------------------------------------------------------------
   导航 / logo / CTA / LoadMore 已在 components.css 与 blog.css 里各自写了
   :focus-visible。这里只补"其余所有可聚焦元素"的兜底，避免出现 Tab 走一圈
   却不知道焦点在哪的段落。
   ★ 刻意**不**覆盖表单控件：输入框已有自己的青色聚焦态（边框转青 + 辉光），
     再叠一圈黄色描边会把"行动色只属于转化入口"的用色规则弄乱。
   ============================================================ */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}
/* 面板类元素被聚焦时，描边贴着圆角走更整齐 */
.card:focus-visible,.post-card:focus-visible,.kpi:focus-visible{border-radius:16px}

/* ============================================================
   6. 仅供屏幕阅读器的文本（视觉隐藏、但仍能被读屏与搜索引擎读到）
   ------------------------------------------------------------
   ★ 用途：有些区块在**视觉上**不需要标题（设计上靠 STEP 01 这类标签自解释），
     但**语义上**必须有 —— 否则标题层级会从 H1 直接跳到 H3，破坏文档大纲。
     SEO 与无障碍都要求「不跳级」。
   ★ blog.css 里原有一条 `aside.blog-side .screen-reader-text`，只作用于侧边栏；
     这里补一份**全局**的，任何位置都能用。
   ★ 不能用 `display:none` / `visibility:hidden` —— 那会让读屏软件也读不到。
   ============================================================ */
.screen-reader-text{
  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;
}