/* apps/worldBook.css
   世界书：暖色创作者空间风格
   修复版本：增加 color-mix 回退、变量回退、无障碍钩子、消除硬编码
*/

/* ===== 基础变量与回退 ===== */
/* 为所有变量增加 fallback，确保未定义时仍能显示 */
.screen-page {
    /* 回退方案：纯色 -> 高级混合 */
    background: var(--panel, #f8f4f0);
    background: color-mix(in srgb, var(--panel, #f8f4f0) 100%, transparent);
}

.screen-header {
    min-height: 54px;
    padding: 10px 16px 9px;
    /* 回退：如果浏览器不支持 color-mix，直接使用 panel-strong 的近似值 */
    background: var(--panel-strong, #ece6df);
    background: color-mix(in srgb, var(--panel-strong, #ece6df) 76%, transparent);
    border-bottom: 1px solid var(--line, #ddd);
    border-bottom: 1px solid color-mix(in srgb, var(--line, #ddd) 70%, transparent);
}

.screen-title {
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--text, #1a1a1a);
}

/* ===== 顶部统计 ===== */
.wb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 14px 6px;
}

.wb-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid var(--line, #ddd);
    border: 1px solid color-mix(in srgb, var(--accent, #b8864b) 18%, var(--line, #ddd));
    border-radius: 999px;
    background: var(--panel-strong, #ece6df);
    background: color-mix(in srgb, var(--accent, #b8864b) 7%, var(--panel-strong, #ece6df));
    color: var(--muted, #888);
    font-size: 11px;
    line-height: 1.4;
}

.wb-stat b {
    color: var(--text, #1a1a1a);
    font-size: 13px;
    /* 修复：750 -> 700，跨浏览器更稳定 */
    font-weight: 700;
}

/* ===== 条目列表 ===== */
.wb-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 10px 14px 8px;
}

.wb-entry {
    position: relative;
    overflow: hidden;
    padding: 14px 14px 12px 16px;
    border: 1px solid var(--line, #ddd);
    border: 1px solid color-mix(in srgb, var(--line, #ddd) 85%, transparent);
    border-radius: 14px;
    background: var(--panel-strong, #ece6df);
    /* box-shadow 回退：直接使用透明或纯色阴影 */
    box-shadow: 0 2px 7px rgba(69, 46, 24, 0.06);
    box-shadow:
        0 2px 7px rgba(69, 46, 24, 0.06),
        0 1px 1px rgba(255, 255, 255, 0.7) inset;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.wb-entry::before {
    content: "";
    position: absolute;
    /* 兼容写法：inset 支持度尚可，但为保万全，用 top/right/bottom/left */
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 3px;
    background: var(--wb-accent, #b8864b);
    opacity: 0.95;
}

.wb-entry:hover {
    border-color: var(--line, #ddd);
    border-color: color-mix(in srgb, var(--wb-accent, #b8864b) 42%, var(--line, #ddd));
    box-shadow: 0 5px 14px rgba(69, 46, 24, 0.1);
    box-shadow:
        0 5px 14px rgba(69, 46, 24, 0.1),
        0 1px 1px rgba(255, 255, 255, 0.75) inset;
    transform: translateY(-1px);
}

/* 键盘焦点与无障碍焦点状态 */
.wb-entry:focus-within {
    border-color: var(--line, #ddd);
    border-color: color-mix(in srgb, var(--wb-accent, #b8864b) 60%, var(--line, #ddd));
    box-shadow: 0 0 0 3px rgba(184, 134, 75, 0.13);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--wb-accent, #b8864b) 13%, transparent),
        0 5px 14px rgba(69, 46, 24, 0.1);
}

.wb-entry.is-disabled {
    opacity: 0.56;
    background: var(--panel, #f8f4f0);
    background: color-mix(in srgb, var(--panel, #f8f4f0) 82%, var(--panel-strong, #ece6df));
}

.wb-entry.is-disabled::before {
    background: var(--muted, #888);
}

/* ===== 首行 ===== */
.wb-entry-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* --- 开关按钮（增强无障碍钩子） --- */
.wb-toggle {
    flex: none;
    position: relative;
    width: 38px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--panel, #f8f4f0);
    background: color-mix(in srgb, var(--muted, #888) 26%, var(--panel, #f8f4f0));
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.wb-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
    transition: transform 0.2s ease;
}

/* 同时支持 .on 类 和 ARIA 属性（适配屏幕阅读器状态） */
.wb-toggle.on,
.wb-toggle[aria-checked="true"] {
    background: var(--wb-accent, #b8864b);
    box-shadow: 0 2px 6px rgba(184, 134, 75, 0.28);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--wb-accent, #b8864b) 28%, transparent);
}

.wb-toggle.on::after,
.wb-toggle[aria-checked="true"]::after {
    transform: translateX(16px);
}

/* 统一焦点样式（包含所有可交互元素） */
.wb-toggle:focus-visible,
.wb-delete-btn:focus-visible,
.wb-add-btn:focus-visible,
.wb-title-input:focus-visible,
.wb-text-input:focus-visible,
.wb-priority:focus-visible {
    outline: 2px solid var(--wb-accent, #b8864b);
    outline: 2px solid color-mix(in srgb, var(--wb-accent, #b8864b) 70%, transparent);
    outline-offset: 2px;
}

/* --- 标题输入 --- */
.wb-title-input {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text, #1a1a1a);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
}

.wb-title-input::placeholder,
.wb-text-input::placeholder {
    color: var(--muted, #888);
    color: color-mix(in srgb, var(--muted, #888) 70%, transparent);
}

/* --- 优先级选择 --- */
.wb-priority {
    flex: none;
    min-width: 54px;
    padding: 4px 7px;
    border: 1px solid var(--line, #ddd);
    border-radius: 8px;
    outline: none;
    background: var(--panel, #f8f4f0);
    color: var(--muted, #888);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

/* ===== 正文输入框 ===== */
.wb-text-input {
    display: block;
    width: 100%;
    min-height: 56px;
    margin-top: 10px;
    padding: 9px 10px;
    resize: vertical;
    border: 1px solid var(--line, #ddd);
    border: 1px solid color-mix(in srgb, var(--line, #ddd) 74%, transparent);
    border-radius: 9px;
    outline: none;
    background: var(--panel, #f8f4f0);
    background: color-mix(in srgb, var(--panel, #f8f4f0) 72%, var(--panel-strong, #ece6df));
    color: var(--text, #1a1a1a);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.65;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wb-text-input:focus {
    border-color: var(--line, #ddd);
    border-color: color-mix(in srgb, var(--wb-accent, #b8864b) 56%, var(--line, #ddd));
    background: var(--panel-strong, #ece6df);
}

/* ===== 底部信息 ===== */
.wb-entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.wb-activation {
    max-width: 65%;
    overflow: hidden;
    padding: 3px 8px;
    border: 1px solid var(--line, #ddd);
    border: 1px solid color-mix(in srgb, var(--line, #ddd) 84%, transparent);
    border-radius: 7px;
    background: var(--panel, #f8f4f0);
    color: var(--muted, #888);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 删除按钮（修复硬编码色值） --- */
.wb-delete-btn {
    flex: none;
    padding: 5px 7px;
    border: none;
    border-radius: 7px;
    background: transparent;
    /* 使用变量，便于主题定制 */
    color: var(--muted, #888);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.65;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        opacity 0.15s ease;
}

.wb-delete-btn:hover {
    opacity: 1;
    /* 使用危险色变量，并保留十六进制作为回退 */
    color: var(--danger, #c84d45);
    background: color-mix(in srgb, var(--danger, #c84d45) 9%, transparent);
    background: rgba(200, 77, 69, 0.09);
}

/* ===== 新增按钮 ===== */
.wb-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 28px);
    min-height: 44px;
    margin: 4px 14px 16px;
    padding: 10px 12px;
    border: 1px dashed var(--line, #ddd);
    border: 1px dashed color-mix(in srgb, var(--wb-accent, #b8864b) 58%, var(--line, #ddd));
    border-radius: 11px;
    background: transparent;
    background: color-mix(in srgb, var(--wb-accent, #b8864b) 5%, transparent);
    color: var(--wb-accent, #9a6b36);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.wb-add-btn:hover {
    border-color: var(--wb-accent, #b8864b);
    background: color-mix(in srgb, var(--wb-accent, #b8864b) 11%, transparent);
    transform: translateY(-1px);
}

.wb-add-btn:active {
    transform: translateY(0);
}

/* ===== 主题系统 ===== */
html[data-theme="warm"] {
    --wb-accent: #b8864b;
}

html[data-theme="cool"] {
    --wb-accent: #5f89a2;
}

html[data-theme="pink"] {
    --wb-accent: #c87596;
}

html[data-theme="geo"] {
    --wb-accent: #777799;
}

html[data-theme="clean"] {
    --wb-accent: #707070;
}

html[data-theme="dark"] {
    --wb-accent: #d19a5c;
}

/* Dark 主题特殊覆盖（直接设置背景色，不依赖 color-mix 以防万一） */
html[data-theme="dark"] .wb-text-input,
html[data-theme="dark"] .wb-priority {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .wb-entry {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.2),
        0 1px 1px rgba(255, 255, 255, 0.04) inset;
}

/* ===== 窄屏适配 ===== */
@media (max-width: 340px) {
    .wb-entry {
        padding-left: 13px;
        padding-right: 11px;
    }

    .wb-entry-top {
        gap: 7px;
    }

    .wb-priority {
        min-width: 50px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .wb-title-input {
        font-size: 14px;
    }

    .wb-delete-btn {
        font-size: 10px;
    }
}