/*!
 * blog-modules.css — 内核内置模块样式
 * 覆盖：视频播放器 / 投票模块 / 简介模块 / 封面骨架屏与生成式占位图
 * 版本：3.2.0
 */

/* ==================== 变量 ==================== */
:root {
    --bm-accent: var(--primary, #2563eb);
    --bm-border: rgba(0, 0, 0, .09);
    --bm-surface: rgba(127, 131, 145, .06);
    --bm-text: inherit;
    --bm-muted: rgba(100, 116, 139, .85);
    --bm-radius: 12px;
    --bm-thumb-track: rgba(0, 0, 0, .05);
    --bm-thumb-shine: rgba(255, 255, 255, .6);
    --bm-poll-track: rgba(0, 0, 0, .045);
    --bm-poll-bar: color-mix(in srgb, var(--bm-accent) 26%, transparent);
    --bm-poll-box-inner: #fff;
    --bm-poll-border: rgba(0, 0, 0, .2);
}

html[data-theme="dark"],
[data-theme="dark"] {
    --bm-border: rgba(255, 255, 255, .12);
    --bm-surface: rgba(255, 255, 255, .05);
    --bm-muted: rgba(148, 163, 184, .9);
    --bm-thumb-track: rgba(255, 255, 255, .07);
    --bm-thumb-shine: rgba(255, 255, 255, .12);
    --bm-poll-track: rgba(255, 255, 255, .06);
    --bm-poll-bar: color-mix(in srgb, var(--bm-accent) 40%, transparent);
    --bm-poll-box-inner: #0f172a;
    --bm-poll-border: rgba(255, 255, 255, .28);
}

/* color-mix 不支持时的回退 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root { --bm-poll-bar: rgba(37, 99, 235, .22); }
    [data-theme="dark"] { --bm-poll-bar: rgba(96, 165, 250, .34); }
}

/* ==================== 视频播放器 ==================== */
.video-block {
    margin: 22px 0;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    background: var(--bm-surface);
    overflow: hidden;
}

.video-frame {
    position: relative;
    width: 100%;
    background: #000;
    line-height: 0;
}

.video-frame .video-el {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.video-caption {
    padding: 10px 14px 0;
    font-size: 13px;
    color: var(--bm-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.video-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 14px 12px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--bm-muted);
    border: 1px solid var(--bm-border);
    border-radius: 999px;
    text-decoration: none;
    transition: all .2s;
}

.video-download:hover {
    color: var(--bm-accent);
    border-color: var(--bm-accent);
    background: color-mix(in srgb, var(--bm-accent) 8%, transparent);
}

.video-caption + .video-download { margin-top: 8px; }

/* 卡片简介里的视频：限高、隐藏下载按钮，避免列表被撑高 */
.video-context-excerpt .video-frame { max-height: 210px; }
.video-context-excerpt .video-el { object-fit: cover; }
.video-context-excerpt .video-download { display: none; }
.video-context-excerpt .video-caption { font-size: 12px; padding: 8px 12px 10px; }

/* ==================== 简介模块 ==================== */
.excerpt-module {
    margin: 6px 0 2px;
}

.excerpt-module > .video-block,
.excerpt-module > .poll-block {
    margin: 0;
}

.excerpt-module-text {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--bm-muted);
}

/* ==================== 投票模块 ==================== */
.poll-block {
    margin: 22px 0;
    padding: 20px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    background: var(--bm-surface);
}

.poll-block--missing {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bm-muted);
}

.poll-head { margin-bottom: 14px; }

.poll-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.poll-title i { color: var(--bm-accent); margin-top: 3px; }

.poll-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--bm-muted);
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.poll-block.is-result .poll-option { cursor: default; }

.poll-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.poll-option-box {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bm-poll-border);
    border-radius: 50%;
    transition: all .18s;
}

.poll-block[data-poll-type="multi"] .poll-option-box { border-radius: 5px; }

.poll-option:hover .poll-option-box { border-color: var(--bm-accent); }

.poll-option input:checked + .poll-option-box {
    border-color: var(--bm-accent);
    background: var(--bm-accent);
    box-shadow: inset 0 0 0 3.5px var(--bm-poll-box-inner);
}

.poll-option input:focus-visible + .poll-option-box {
    outline: 2px solid var(--bm-accent);
    outline-offset: 2px;
}

.poll-option-main {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--bm-poll-track);
    overflow: hidden;
    transition: background .2s;
}

.poll-option:hover .poll-option-main { background: color-mix(in srgb, var(--bm-accent) 6%, var(--bm-poll-track)); }

.poll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--bm-poll-bar);
    border-radius: 9px;
    transition: width .55s cubic-bezier(.22, 1, .36, 1);
}

.poll-option-text {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.poll-option.is-picked .poll-option-text { font-weight: 600; color: var(--bm-accent); }

.poll-option-stat {
    flex: none;
    min-width: 62px;
    text-align: right;
    font-size: 12.5px;
    color: var(--bm-muted);
    font-variant-numeric: tabular-nums;
}

/* 未投票（表单态）不显示统计栏，避免 min-width 挤压选项文字 */
.poll-block.is-voting .poll-option-stat { display: none; }

.poll-option-pct { font-weight: 600; }
.poll-option-count { display: block; font-size: 11.5px; opacity: .75; }

.poll-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.poll-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    font-size: 14px;
    color: #fff;
    background: var(--bm-accent);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .2s, transform .15s;
}

.poll-submit:hover { filter: brightness(1.08); }
.poll-submit:active { transform: scale(.97); }
.poll-submit[disabled] { opacity: .6; cursor: not-allowed; filter: none; transform: none; }

.poll-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bm-accent);
}

.poll-meta {
    font-size: 12.5px;
    color: var(--bm-muted);
    margin-left: auto;
}

.poll-meta em {
    font-style: normal;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--bm-border);
    border-radius: 999px;
    font-size: 11px;
}

.poll-msg {
    margin-top: 10px;
    font-size: 13px;
    min-height: 0;
}

.poll-msg:empty { display: none; }
.poll-msg.is-error { color: #e11d48; }
.poll-msg.is-ok { color: #16a34a; }

.poll-context-excerpt { padding: 14px; margin: 0; }
.poll-context-excerpt .poll-title { font-size: 14.5px; }
.poll-context-excerpt .poll-option-main { padding: 7px 10px; }
.poll-context-excerpt .poll-option-text { font-size: 13px; }

/* ==================== 封面骨架屏 / 生成式占位图 ==================== */
.thumb-shell {
    position: relative;
    display: block;
    overflow: hidden;
    background: hsl(var(--thumb-hue, 210) 26% 92%);
}

[data-theme="dark"] .thumb-shell { background: hsl(var(--thumb-hue, 210) 14% 20%); }

.thumb-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(100deg, transparent 18%, var(--bm-thumb-shine) 48%, transparent 78%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: thumb-shimmer 1.35s linear infinite;
    transition: opacity .3s;
}

@keyframes thumb-shimmer {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}

.thumb-shell .thumb-img {
    opacity: 0;
    transition: opacity .35s ease;
}

.thumb-shell.is-loaded .thumb-img { opacity: 1; }
.thumb-shell.is-loaded .thumb-skeleton { opacity: 0; animation: none; }
.thumb-shell.has-error .thumb-skeleton { opacity: 0; animation: none; }
.thumb-shell.has-error .thumb-img { display: none; }

.thumb-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        radial-gradient(120% 130% at 10% 6%, hsl(var(--thumb-hue, 210) 84% 66% / .9), transparent 58%),
        linear-gradient(135deg,
            hsl(var(--thumb-hue, 210) 68% 54%),
            hsl(calc(var(--thumb-hue, 210) + 46) 62% 42%));
}

.thumb-placeholder-char {
    font-size: var(--thumb-char-size, 44px);
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .22);
    user-select: none;
}

/* 列表页封面固定高度时，占位字适当缩小 */
.post-card-cover-placeholder .thumb-placeholder-char,
.nova-card-cover .thumb-placeholder-char { font-size: var(--thumb-char-size, 38px); }

/* ==================== 主题适配 ==================== */
/* 简介降级为模块时，解除主题对简介文本的截断限制 */
.post-card-excerpt.is-module,
.nova-card-excerpt.is-module {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    margin-bottom: 12px;
}

/* 占位图与骨架屏要压在主题自带的封面底色之上，但保持在遮罩/角标之下 */
.post-card-cover-link.thumb-shell,
.nova-card-cover.thumb-shell { isolation: isolate; }

/* 旧版 .post-card-cover-placeholder 内的 span 由生成式占位图接管 */
.post-card-cover-placeholder .thumb-placeholder { position: absolute; }

@media (prefers-reduced-motion: reduce) {
    .thumb-skeleton { animation: none; }
    .thumb-shell .thumb-img,
    .poll-option-bar { transition: none; }
}