/* ==========================================================================
   书架样式(2026-09-30)——"事件卡 = 立在书架上的书"
   提取自用户面板 dashboard.html 的内联书卷样式,供首页(public/index.html)
   与用户面板共用,一处维护。

   结构约定:
   .book-card           书身(纸面卡),左侧 ::before 是书脊(带装订棱线)
   .bookmark            顶部右侧垂下的书签(状态角标,绝对定位)
   .shelf-edge          卡片行下方的"架板"
   .archive-drawer      往届折叠抽屉(用户面板专用,首页暂未用)

   防遮挡不变量:.book-card__title 预留右侧 padding,书签永不压字。
   全部取自墨与纸色板(--md-sys-* / --paper-grain)。
   ========================================================================== */

.book-card {
    position: relative;
    overflow: hidden;
    background-image: var(--paper-grain);
}

.book-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--md-sys-color-primary);
    /* 书脊装订棱线 */
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 2px,
        rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 3px,
        transparent 3px, transparent 7px
    );
}

.book-card--voted::before {
    background-color: var(--md-sys-color-secondary);
}

.book-card--upcoming::before {
    background-color: var(--md-sys-color-tertiary);
}

.book-card--archived::before {
    background-color: var(--md-sys-color-outline);
}

.book-card__title {
    padding-right: 88px; /* 避开顶部书签 */
}

.bookmark {
    position: absolute;
    top: 0;
    right: 20px;
    padding: 6px 12px 10px;
    border-radius: 0 0 var(--md-sys-radius-sm, 8px) var(--md-sys-radius-sm, 8px);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 2px 6px rgba(33, 0, 93, 0.22);
}

.bookmark--voted {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}

.bookmark--upcoming {
    background-color: var(--md-sys-color-tertiary);
    color: var(--md-sys-color-on-tertiary);
}

.bookmark--archived {
    background-color: var(--md-sys-color-outline);
    color: var(--md-sys-color-on-primary);
}

/* 架板:卡片行下的搁板 */
.shelf-edge {
    margin-top: 22px;
    height: 9px;
    border-radius: 2px 2px 4px 4px;
    background: linear-gradient(
        180deg,
        var(--md-sys-color-surface-container-highest),
        var(--md-sys-color-outline-variant)
    );
    box-shadow: 0 8px 16px rgba(33, 0, 93, 0.10);
}

/* 往届抽屉:去年及更早的参与记录,默认折叠、点击展开(用户面板) */
.archive-drawer {
    margin-top: 24px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-radius-md);
    background-color: var(--md-sys-color-surface-container-low);
    background-image: var(--paper-grain);
}

/* —— 往届书架(2026-09-30 用户提议) ——
   结束超过半年的旧事件不再平铺大卡,改为"立在书柜里的书":
   只露一根窄书脊,书名竖排,多本并排一行,行下是架板。
   平摊的书信息全,立着的书只看书名——信息密度随"新鲜度"递减。 */
.spine-shelf {
    margin-top: 12px;
}

.spine-shelf .shelf-edge {
    margin-top: 0; /* 书必须"立"在架板上,不留空隙 */
}

.spine-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: flex-end;
    padding: 0 6px;
}

.book-spine {
    display: block;
    width: 46px;
    height: 168px;
    border-radius: 2px;
    text-decoration: none;
    background-color: var(--md-sys-color-primary);
    /* 书脊装订棱线(与平铺书卡同款) */
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.20) 0px, rgba(255, 255, 255, 0.20) 2px,
        rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 3px,
        transparent 3px, transparent 8px
    );
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 高矮错落 + 四色轮换,像真实书柜里深浅不一的一排书 */
.book-spine:nth-child(3n)   { height: 154px; }
.book-spine:nth-child(5n)   { height: 176px; }
.book-spine:nth-child(4n+2) { background-color: var(--md-sys-color-secondary); }
.book-spine:nth-child(4n+3) { background-color: var(--md-sys-color-tertiary); }
.book-spine:nth-child(4n+4) { background-color: var(--md-sys-color-outline); }
.book-spine:nth-child(4n+4) .book-spine__title {
    color: var(--md-sys-color-on-surface); /* 灰紫脊偏浅,深字比白字清楚 */
}

.book-spine:hover,
.book-spine:focus-visible {
    transform: translateY(-10px); /* 从架上抽出一截 */
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.18), 0 8px 14px rgba(33, 0, 93, 0.25);
}

.book-spine__title {
    writing-mode: vertical-rl;       /* 中文书名竖排,天头到地脚 */
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;         /* 超长书名截断,全名看 title 提示 */
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-align: left;
}

.book-spine:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .book-spine {
        width: 38px;
        height: 140px;
    }

    .book-spine__title {
        font-size: 0.75rem;
    }
}

.archive-drawer summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    list-style: none;
    user-select: none;
}

.archive-drawer summary::-webkit-details-marker {
    display: none;
}

.archive-drawer summary > .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.archive-drawer__hint {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.75;
}

.archive-drawer[open] summary {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.archive-drawer__body {
    padding: 20px;
}

@media (max-width: 768px) {
    .book-card__title {
        padding-right: 72px;
    }
}

/* —— 按年分架(2026-09-30 用户反馈:一年一个书架,避免不同年份混排) —— */
.year-shelf {
    margin-top: 20px;
}

.year-shelf:first-of-type {
    margin-top: 0;
}

.year-shelf__label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.year-shelf__year {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.year-shelf__count {
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.75;
}

/* —— 抽出平放的书(2026-09-30 用户提议) ——
   点击书脊后,这本书"横过来正面朝向读者":架板下方展开一张平摊书卡,
   左侧书脊色条与立排时同色系,内容为书名/结束时间/描述 + 操作。 */
.spine-book-detail {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
    animation: spine-reveal 0.25s ease;
}

.spine-book-detail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--md-sys-color-primary);
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 2px,
        rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 3px,
        transparent 3px, transparent 7px
    );
}

.spine-book-detail__body {
    padding: 20px 24px 20px 34px;
}

.spine-book-detail__title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 6px 0;
    color: var(--md-sys-color-on-surface);
}

.spine-book-detail__end {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 10px 0;
}

.spine-book-detail__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 16px 0;
}

.spine-book-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@keyframes spine-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spine-book-detail {
        animation: none;
    }
}

/* —— 封面带书卡(2026-10-09 用户反馈:卡片不像书,
      标题应占满封面而非只在左上角一行) ——
   结合方案:渐变封面带满出血、占满卡片上半部,
   标题居中、日期作封面副标题;封底放简介与操作按钮
   (书封底放简介,呼应真实书籍)。
   仅首页书卡启用(.book-card--cover 修饰类);
   用户面板书卡不加该修饰类,结构/观感不变。
   原理:.book-card--cover { padding: 0 } 抵消
   design-system.css 的 .md-card 内边距(本文件后
   加载,同优先级胜出),封面 thus 满出血;圆角由
   .book-card 的 overflow: hidden 裁剪;书脊 ::before
   与书签 .bookmark 是定位元素,绘制在封面之上。 */
.book-card--cover {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.book-card--cover .book-card__cover {
    flex: 1 1 auto;
    min-height: 148px; /* 封面占满卡片上半部 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--md-sys-spacing-5, 24px) var(--md-sys-spacing-4, 16px);
    text-align: center;
    background: linear-gradient(
        160deg,
        var(--md-sys-color-surface-container-high),
        var(--md-sys-color-primary-container)
    );
}

.book-card--cover .book-card__title {
    /* 88px 左外边距抵消 .book-card__title 的 88px 书签
       避让右内边距,使居中标题的视觉中心回到卡片中轴 */
    margin: 0 0 0 88px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.book-card--cover .book-card__cover-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
}

.book-card--cover .book-card__cover-sub .material-symbols-outlined {
    font-size: 16px;
}

.book-card--cover .book-card__back {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--md-sys-spacing-5, 24px) var(--md-sys-spacing-6, 24px);
}

.book-card--cover .book-card__back-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant);
}

/* 已结束区块 4 列小卡:封面标题同步缩小 */
.events-grid--past .book-card--cover .book-card__title {
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .book-card--cover .book-card__cover {
        min-height: 120px;
    }
}