/*==========================================================================
 * 云雪授权系统 — 交互增强层 v5
 * 位于 app.css 之后加载，专注：可达性 / 动效降级 / 反馈组件 / 微交互
 * 依赖令牌：全部复用 app.css :root，本文件只做增强，不覆盖既有视觉
 *==========================================================================*/

/*------------------------------------------------------
 * 1. 补充令牌：8px 间距基线 + 模块化字体刻度 + 动效时长
 *------------------------------------------------------*/
:root {
    /* 间距（8px 基线） */
    --yx-sp-1: 4px;
    --yx-sp-2: 8px;
    --yx-sp-3: 12px;
    --yx-sp-4: 16px;
    --yx-sp-5: 24px;
    --yx-sp-6: 32px;
    --yx-sp-7: 48px;
    --yx-sp-8: 64px;

    /* 字体刻度（1.2~1.25 比例） */
    --yx-fs-xs:  12px;
    --yx-fs-sm:  13px;
    --yx-fs-base:14px;
    --yx-fs-md:  15px;
    --yx-fs-lg:  16px;
    --yx-fs-xl:  18px;
    --yx-fs-2xl: 20px;
    --yx-fs-3xl: 24px;
    --yx-fs-4xl: 30px;
    --yx-fs-5xl: 38px;
    --yx-fs-6xl: 48px;

    /* 字重层级 */
    --yx-fw-normal: 400;
    --yx-fw-medium: 500;
    --yx-fw-semibold: 600;
    --yx-fw-bold: 700;

    /* 动效：统一时长与缓动，仅作用于 transform / opacity */
    --yx-dur-fast:  .15s;
    --yx-dur-base:  .22s;
    --yx-dur-slow:  .35s;
    --yx-ease:      cubic-bezier(.4, 0, .2, 1);
    --yx-ease-out:  cubic-bezier(.16, 1, .3, 1);

    /* 触摸目标最小尺寸（WCAG 2.5.8 Target Size） */
    --yx-touch-min: 44px;

    /* 焦点环 */
    --yx-ring: 0 0 0 3px rgba(var(--yx-primary-rgb), .28);
    --yx-ring-danger: 0 0 0 3px rgba(255, 107, 107, .26);
}

/*------------------------------------------------------
 * 2. 键盘焦点可见（WCAG 2.4.7 Focus Visible）
 *    仅对 :focus-visible 生效，鼠标点击不出现难看的黑框
 *------------------------------------------------------*/
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--yx-primary);
    outline-offset: 2px;
    border-radius: var(--yx-radius-sm);
}

/* 在深色/彩色按钮上反白焦点环，保证 3:1 对比 */
.yx-btn:focus-visible,
.yx-avatar:focus-visible,
.yx-nav-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--yx-primary-rgb), .55);
}

/* 表单控件焦点环外扩，覆盖已存在的 box-shadow 方案 */
.yx-input:focus-visible,
.yx-textarea:focus-visible,
.yx-select:focus-visible,
.layui-input:focus-visible,
.layui-textarea:focus-visible {
    outline: none;
    box-shadow: var(--yx-ring);
    border-color: var(--yx-primary);
}

/* 跳过导航链接：键盘用户第一个可聚焦元素 */
.yx-skip-link {
    position: absolute;
    left: var(--yx-sp-3);
    top: -60px;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--yx-primary);
    color: #fff;
    font-size: var(--yx-fs-sm);
    font-weight: var(--yx-fw-semibold);
    border-radius: 0 0 var(--yx-radius-sm) var(--yx-radius-sm);
    transition: top var(--yx-dur-base) var(--yx-ease);
}
.yx-skip-link:focus-visible { top: 0; }

/* 屏幕阅读器专用文本 */
.yx-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*------------------------------------------------------
 * 3. 降低动效偏好（WCAG 2.3.3 / 系统级「减弱动态效果」）
 *    保留可用性，仅移除位移与循环动画
 *------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .yx-hero-orb,
    .yx-hero-orb-1,
    .yx-hero-orb-2 { animation: none !important; }
    .yx-reveal { opacity: 1 !important; transform: none !important; }
    .yx-skeleton::after { display: none; }
}

/*------------------------------------------------------
 * 4. 滚动入场动画（IntersectionObserver 驱动）
 *    默认隐藏，JS 加 .is-in 触发；无 JS 时降级为可见
 *------------------------------------------------------*/
.yx-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--yx-dur-slow) var(--yx-ease-out),
        transform var(--yx-dur-slow) var(--yx-ease-out);
    will-change: opacity, transform;
}
.yx-reveal.is-in { opacity: 1; transform: none; }

/* JS 未执行时的兜底 */
.no-js .yx-reveal { opacity: 1; transform: none; }

/*------------------------------------------------------
 * 5. 骨架屏（替代空白等待，降低感知延迟）
 *------------------------------------------------------*/
.yx-skeleton {
    position: relative;
    background: #EDF0F6;
    border-radius: var(--yx-radius-sm);
    overflow: hidden;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.yx-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: yxSkeletonSweep 1.3s infinite;
}
@keyframes yxSkeletonSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.yx-skeleton-text { height: 14px; margin-bottom: 10px; }
.yx-skeleton-text:last-child { width: 60% !important; margin-bottom: 0; }
.yx-skeleton-title { height: 22px; width: 45%; margin-bottom: 16px; }
.yx-skeleton-block { height: 96px; }

/*------------------------------------------------------
 * 6. 原生 Toast 反馈（role=status，屏幕阅读器可播报）
 *------------------------------------------------------*/
.yx-toast-stack {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.yx-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--yx-radius-pill);
    background: #1F2937;
    color: #fff;
    font-size: var(--yx-fs-base);
    font-weight: var(--yx-fw-medium);
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    transition:
        opacity var(--yx-dur-base) var(--yx-ease-out),
        transform var(--yx-dur-base) var(--yx-ease-out);
}
.yx-toast.is-in { opacity: 1; transform: none; }
.yx-toast.is-out { opacity: 0; transform: translateY(-8px) scale(.97); }
.yx-toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.yx-toast--success svg { color: #34D399; }
.yx-toast--error   svg { color: #FCA5A5; }
.yx-toast--warning svg { color: #FCD34D; }
.yx-toast--info    svg { color: #93C5FD; }

@media (max-width: 480px) {
    .yx-toast-stack { top: 70px; }
    .yx-toast { font-size: var(--yx-fs-sm); padding: 10px 16px; }
}

/*------------------------------------------------------
 * 7. 表单实时校验反馈
 *    错误不只靠颜色：图标 + 文本 + aria-invalid 三重传达
 *------------------------------------------------------*/
.yx-input.is-invalid,
.yx-textarea.is-invalid,
.yx-select.is-invalid {
    border-color: var(--yx-danger);
    background: #FFF8F8;
}
.yx-input.is-invalid:focus,
.yx-textarea.is-invalid:focus {
    box-shadow: var(--yx-ring-danger);
    border-color: var(--yx-danger);
}
.yx-input.is-valid,
.yx-textarea.is-valid {
    border-color: var(--yx-success);
}

.yx-field-msg {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: var(--yx-fs-xs);
    font-weight: var(--yx-fw-medium);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--yx-dur-fast) var(--yx-ease), max-height var(--yx-dur-fast) var(--yx-ease);
}
.yx-field-msg.is-show { opacity: 1; max-height: 40px; }
.yx-field-msg--error { color: #CF1322; }
.yx-field-msg--success { color: #0F9D71; }
.yx-field-msg svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 密码强度条：三段式 + 文字说明，不单靠颜色 */
/* 兼容 app.css 既有 .yx-strength（flex + align-items:center）布局 */
.yx-strength-bar {
    flex: 1;
    display: flex;
    gap: 5px;
    min-width: 0;
}
.yx-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #E5E9F0;
    transition: background var(--yx-dur-base) var(--yx-ease);
}
.yx-strength-label {
    font-size: var(--yx-fs-xs);
    font-weight: var(--yx-fw-medium);
    color: var(--yx-ink-3);
    min-width: 52px;
    text-align: right;
    flex-shrink: 0;
}
.yx-strength[data-level="1"] .yx-strength-seg:nth-child(-n+1) { background: var(--yx-danger); }
.yx-strength[data-level="2"] .yx-strength-seg:nth-child(-n+2) { background: var(--yx-warning); }
.yx-strength[data-level="3"] .yx-strength-seg:nth-child(-n+3) { background: var(--yx-success); }
.yx-strength[data-level="1"] .yx-strength-label { color: #CF1322; }
.yx-strength[data-level="2"] .yx-strength-label { color: #D48806; }
.yx-strength[data-level="3"] .yx-strength-label { color: #0F9D71; }

/*------------------------------------------------------
 * 8. 微交互参数统一（hover 微升 / active 微沉 / 禁用）
 *------------------------------------------------------*/
.yx-card-hover,
.yx-app-card,
.yx-feature,
.yx-pkg-card {
    transition:
        transform var(--yx-dur-base) var(--yx-ease-out),
        box-shadow var(--yx-dur-base) var(--yx-ease-out),
        border-color var(--yx-dur-base) var(--yx-ease);
}
@media (hover: hover) {
    .yx-card-hover:hover,
    .yx-app-card:hover,
    .yx-feature:hover,
    .yx-pkg-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--yx-shadow-lg);
    }
}
.yx-card-hover:active,
.yx-app-card:active,
.yx-feature:active,
.yx-pkg-card:active {
    transform: translateY(-1px) scale(.995);
}

/* 图标按钮：hover 放大 1.05，按下收缩 0.95（GPU 友好） */
.yx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--yx-touch-min);
    height: var(--yx-touch-min);
    border: none;
    background: transparent;
    color: var(--yx-ink-3);
    border-radius: var(--yx-radius-sm);
    cursor: pointer;
    transition: transform var(--yx-dur-fast) var(--yx-ease), background var(--yx-dur-fast) var(--yx-ease), color var(--yx-dur-fast) var(--yx-ease);
}
@media (hover: hover) {
    .yx-icon-btn:hover { background: var(--yx-bg); color: var(--yx-primary); transform: scale(1.05); }
}
.yx-icon-btn:active { transform: scale(.95); }
.yx-icon-btn svg { width: 18px; height: 18px; }

/* 行按压反馈（列表、导航项） */
.yx-press:active { transform: scale(.98); }
.yx-press { transition: transform var(--yx-dur-fast) var(--yx-ease); }

/*------------------------------------------------------
 * 9. 移动端：安全区 + 触摸目标 + 横向滚动抑制
 *------------------------------------------------------*/
.yx-footer,
.yx-back-top {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.yx-back-top {
    bottom: calc(var(--yx-sp-5) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--yx-sp-4) + env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
    /* 触摸目标不小于 44px */
    .yx-nav-link,
    .yx-dropdown-item {
        min-height: var(--yx-touch-min);
    }
    .yx-btn-sm { padding: 9px 14px; }

    /* 表格横向滚动时给出阴影暗示 */
    .yx-table-wrap {
        box-shadow: inset -14px 0 12px -14px rgba(15, 23, 42, .18);
    }
}

/* 移动端抽屉打开时锁定背景滚动 */
body.yx-nav-open { overflow: hidden; }

/*------------------------------------------------------
 * 10. 加载态按钮（防重复提交）
 *------------------------------------------------------*/
.yx-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.yx-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yxSpin .6s linear infinite;
}
@keyframes yxSpin { to { transform: rotate(360deg); } }

/*------------------------------------------------------
 * 11. 高对比度模式 / 打印
 *------------------------------------------------------*/
@media (prefers-contrast: more) {
    :root {
        --yx-line: #8C8C8C;
        --yx-ink-3: #595959;
        --yx-ink-4: #595959;
    }
    .yx-card, .yx-input { border-color: #8C8C8C; }
}

@media print {
    .yx-nav, .yx-back-top, .yx-toast-stack, .yx-nav-toggle { display: none !important; }
    body { background: #fff; }
    .yx-card { box-shadow: none; border: 1px solid #D9D9D9; }
}