/* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */

/* ============================================================
 * components.css — 全站通用组件层（跨页面复用的原子件）
 * ------------------------------------------------------------
 * 定位：只放**已被模板 / 脚本实际消费**的原子件与全局约定，不写任何页面专属样式。
 * 页面专属样式仍落各自文件（home/list/grid/toolbar/member/help…），避免本文件膨胀。
 *
 * 铁律：
 *   1. 颜色 / 圆角 / 阴影一律 var(--color-*)，禁硬编码（深色模式自动跟随）。
 *   2. 本文件**不写任何断点媒体查询** —— 断点统一在 responsive.css，全站只留一处。
 *      （prefers-reduced-motion / hover 等「特性查询」不属于断点，允许就近写在所属
 *       组件文件里；审计脚本 `脚本/审计前端.py media` 只报断点越界。）
 *   3. 命名统一 `ui-` 前缀，避免与业务类（res-/grid-/app-/mc-/pf-）冲突。
 *   4. YAGNI：新增组件必须先在页面落地再入库，禁止「先囤一批以后可能用」。
 *      囤积的组件会被 `脚本/审计前端.py dead` 判定为死 CSS 并清理。
 * ============================================================ */

/* ------------------------------------------------------------
 * 一、可访问性基线
 * ------------------------------------------------------------ */

/* 键盘可见焦点环：只对键盘/辅助技术触发，鼠标点击不出现（:focus-visible）。
   用 :where() 把特异性压到 0，绝不抢占各组件自己的 :focus 样式。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* 移除浏览器默认焦点圈，避免与上面的环叠加成双圈 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

/* 跳过导航：键盘用户首 Tab 即可直达主内容（挂在 layout/base.html body 首位） */
.ui-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 999;
    padding: 8px 16px;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: top .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-skip-link:focus {
    top: 12px;
}

/* ------------------------------------------------------------
 * 二、异步状态
 * ------------------------------------------------------------ */

/* 加载中：AJAX 局部刷新时挂在容器上（document.js 的 setBusy），
   内容变淡并屏蔽误点，同时由脚本写 aria-busy 供辅助技术识别。 */
.ui-busy {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
}