/* yohaku-components.css — 知心 统一组件层（余白 / Yohaku 皮肤）
 * 版本：CB163。改动本文件须递增 ?v= 并对全站引用加 cache-busting（见 CODEBUDDY.md §8.7）。
 *
 * 铁律（H 执行建议①）：必须先 @import design-tokens.css，复用已有 token，绝不重定义变量。
 * 每个组件下方标注「依赖 token」，避免颜色变量漏覆盖（CB-147 starters 白底白字根因
 * = --nlux-cvStrt--txtClr 未覆盖）。本文件只消费 token，不声明新色值。
 *
 * 本层是全站组件唯一数据源（WeUI 词汇 + 余白皮肤）。discover(首页) 为首个练兵场，
 * 后续 profile / chat / community / settings 直接复用，消灭「每页各写一套 card 类」的技术债。
 */
@import url('design-tokens.css?v=CB163');

/* ── 区块标题 ──
 * 依赖: --color-text-title, --font-title-md, --space-lg */
.yx-section-label {
    font-size: var(--font-title-md, 16px);
    font-weight: 600;
    color: var(--color-text-title, #061E3C);
    margin: 20px 16px 0;
}

/* ── 通用玻璃卡（全站组件基底，等价于 .zen-card）──
 * 依赖: --color-card-bg, --color-border-line, --radius-card, --shadow-card, --glass-depth, --padding-card */
.yx-card {
    background-color: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border-line, #E8E4DE);
    border-radius: var(--radius-card, 20px);
    box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.04)), var(--glass-depth);
    padding: var(--padding-card, 16px);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* ── 网格（分类入口 / 图标网格）──
 * 依赖: --space-md */
.yx-grid {
    display: grid;
    gap: var(--space-md, 12px);
    margin: 12px 16px 0;
}
.yx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.yx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.yx-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── 分类入口卡（情绪🎭/社交🤝/专注🧠/语言💬/动手✋/全部📂）──
 * 依赖: --color-primary-bg, --color-brand, --color-text-title, --radius-md,
 *       --color-card-bg, --color-border-line */
.yx-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    text-align: center;
    background-color: var(--color-primary-bg, #FBEFF2);
    border: 1px solid rgba(197, 100, 115, 0.12);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.yx-cat:active { transform: scale(0.97); }
.yx-cat__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    flex-shrink: 0;
    background-color: var(--color-card-bg, #fff);
    color: var(--color-brand, #C4916C);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yx-cat__icon svg { width: 22px; height: 22px; }
.yx-cat__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-title, #061E3C);
}
.yx-cat.active {
    border-color: var(--color-brand, #C4916C);
    background-color: var(--color-primary-bg, #FBEFF2);
}
.yx-cat.active .yx-cat__icon {
    background-color: var(--color-brand, #C4916C);
    color: #fff;
}

/* ── 媒体列表（推荐流 / 报告列表容器）──
 * 依赖: --space-md */
.yx-media-list {
    margin: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 12px);
}

/* ── 媒体卡（推荐条目 / 报告条目 / 内容入口）──
 * 依赖: --color-card-bg, --color-border-line, --radius-card, --shadow-card, --glass-depth,
 *       --color-primary-bg, --color-brand, --color-text-title, --color-text-secondary */
.yx-media-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border-line, #E8E4DE);
    border-radius: var(--radius-card, 20px);
    box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.04)), var(--glass-depth);
    text-decoration: none;
    color: inherit;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.yx-media-box:active { transform: scale(0.98); }
.yx-media-box__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
    background-color: var(--color-primary-bg, #FBEFF2);
    color: var(--color-brand, #C4916C);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yx-media-box__icon svg { width: 24px; height: 24px; }
.yx-media-box__main { flex: 1; min-width: 0; }
.yx-media-box__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-title, #061E3C);
}
.yx-media-box__desc {
    font-size: 13px;
    color: var(--color-text-secondary, #939393);
    margin-top: 2px;
    line-height: 1.5;
}
.yx-media-box__cta {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-brand, #C4916C);
    white-space: nowrap;
}

/* ── 角标（荐 / 热 / 活动 / 测评 / 作业）──
 * 依赖: --color-brand */
.yx-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    background-color: var(--color-brand, #C4916C);
}

/* ── 设置页组件（供第④刀 settings 复用，本刀先行定义）──
 * 依赖: --space-lg, --color-card-bg, --color-border-line, --radius-card,
 *       --color-brand, --color-text-title, --color-text-secondary */
.yx-group { margin: var(--space-lg, 24px) 16px 0; }
.yx-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border-line, #E8E4DE);
    text-decoration: none;
    color: inherit;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}
.yx-cell:first-child { border-radius: var(--radius-card, 20px) var(--radius-card, 20px) 0 0; }
.yx-cell:last-child { border-radius: 0 0 var(--radius-card, 20px) var(--radius-card, 20px); }
.yx-cell:only-child { border-radius: var(--radius-card, 20px); }
.yx-cell + .yx-cell { border-top: none; }
.yx-cell__icon {
    width: 22px;
    height: 22px;
    color: var(--color-brand, #C4916C);
    flex-shrink: 0;
}
.yx-cell__icon svg { width: 22px; height: 22px; }
.yx-cell__label { flex: 1; font-size: 15px; color: var(--color-text-title, #061E3C); }
.yx-cell__value { font-size: 13px; color: var(--color-text-secondary, #939393); }
.yx-cell__go { color: var(--color-text-secondary, #939393); }

/* ── WeUI Dialog（居中对话框，令牌重涂 · CB-Phase0）──
 * 依赖: --color-mask, --color-card-bg, --color-border-line, --radius-lg,
 *       --shadow-popup, --color-text-title, --color-text-secondary, --color-brand, --color-text-inverse */
.yx-dialog-mask {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-mask);
    padding: var(--space-lg);
}
.yx-dialog {
    width: 100%; max-width: 320px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popup);
    padding: var(--space-lg) var(--space-base) var(--space-base);
    text-align: center;
}
.yx-dialog__title {
    font-size: 17px; font-weight: 600;
    color: var(--color-text-title);
    margin-bottom: var(--space-sm);
}
.yx-dialog__body {
    font-size: 14px; line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}
.yx-dialog__actions { display: flex; gap: var(--space-sm); }
.yx-dialog__btn {
    flex: 1; padding: 10px 0;
    border-radius: var(--radius-md);
    font: var(--font-btn); cursor: pointer;
    border: 1px solid var(--color-border-line);
    background: var(--color-card-bg);
    color: var(--color-text-title);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background-color 0.2s ease;
}
.yx-dialog__btn--primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}
.yx-dialog__btn:active { transform: scale(0.97); }

/* ── WeUI ActionSheet（底部动作面板 · CB-Phase0）──
 * 依赖: --color-mask, --color-card-bg, --color-border-line, --radius-lg,
 *       --color-text-title, --color-text-secondary, --color-danger, --color-brand, --color-bg-hover */
.yx-sheet-mask {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--color-mask);
}
.yx-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.yx-sheet__group {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.yx-sheet__item {
    display: block; width: 100%;
    padding: 16px; text-align: center;
    background: var(--color-card-bg);
    border: none; font-size: 17px;
    color: var(--color-text-title);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}
.yx-sheet__item + .yx-sheet__item { border-top: 1px solid var(--color-border-line); }
.yx-sheet__item:active { background: var(--color-bg-hover); }
.yx-sheet__item--danger { color: var(--color-danger); }
.yx-sheet__item--primary { color: var(--color-brand); }
.yx-sheet__cancel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-line);
    border-radius: var(--radius-lg);
    padding: 16px; text-align: center;
    font-size: 17px; color: var(--color-text-title);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.yx-sheet__cancel:active { transform: scale(0.99); }

/* ── Slideview（左滑露出操作，JS 驱动；此处仅样式骨架 · CB-Phase0）──
 * 依赖: --color-card-bg, --color-danger, --radius-lg, --color-text-inverse, --color-bg-hover */
.yx-swipe { position: relative; overflow: hidden; }
.yx-swipe__actions {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: stretch;
}
.yx-swipe__action {
    display: flex; align-items: center; padding: 0 20px;
    color: var(--color-text-inverse);
    background: var(--color-danger);
    font: var(--font-btn);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 左滑内容层：translateX 露出右侧 actions（JS 驱动） */
.yx-swipe__content {
    position: relative; z-index: 1;
    background: var(--color-bg-card);
    transition: transform 0.18s ease; will-change: transform;
}

/* ── 长按上下文菜单（毛玻璃 Context Menu，JS 驱动 · CB-249 全局组件）──
 * 依赖: --color-bg-card, --color-danger, --color-text-*, --radius-lg, --shadow-popup */
.yx-cm-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(30, 24, 20, 0.18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.2s ease;
}
.yx-cm-backdrop--open { opacity: 1; }
/* 被长按抬起的元素 */
.yx-cm-lifted {
    transform: scale(1.03);
    box-shadow: var(--shadow-popup);
    z-index: 201; position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.yx-cm {
    position: fixed; z-index: 210; left: 50%; bottom: 0;
    transform: translate(-50%, 100%);
    width: 100%; max-width: var(--max-width);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-popup);
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
    transition: transform 0.26s cubic-bezier(.2,.8,.2,1);
}
.yx-cm--open { transform: translate(-50%, 0); }
.yx-cm__title {
    font: var(--font-small); color: var(--color-text-hint);
    padding: 12px 20px 6px; text-align: center;
}
.yx-cm__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 20px; background: none; border: none; cursor: pointer;
    font: var(--font-btn); color: var(--color-text-primary);
    text-align: left; -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}
.yx-cm__item:active { background: var(--color-bg-hover); }
.yx-cm__item .zxn-icon { width: 20px; height: 20px; color: var(--color-primary); }
.yx-cm__item--danger { color: var(--color-danger); }
.yx-cm__item--danger .zxn-icon { color: var(--color-danger); }
.yx-cm__divider { height: 1px; background: var(--color-divider); margin: 4px 0; }
.yx-cm__cancel {
    display: block; width: calc(100% - 32px); margin: 8px 16px 0;
    padding: 13px; border: none; border-radius: var(--radius-round);
    background: var(--color-bg-hover); color: var(--color-text-secondary);
    font: var(--font-btn); cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* 深色模式由 design-tokens.css 的 [data-theme="dark"] token 覆盖统一处理，
 * 本文件不写任何深色分支（避免 token 漏覆盖，H 建议①）。 */