/* books.css — СТАТЫ → КНИГИ. Язык ДНЕВНИКА (diary.css: карточки, год месяцами, месяц крупно),
   плюс свое: обложки 2:3, лента «читаю сейчас», месяцы столбиками, полка дочитанного, день с цитатами. */

.bk-card-fin::before { background: var(--gold, #F4D136); box-shadow: 0 0 6px rgba(244, 209, 54, .5); }
.bk-card-fin .diary-card-val { color: var(--gold, #F4D136); }
.bk-card-q::before { background: #B592AE; box-shadow: 0 0 6px rgba(181, 146, 174, .55); }
.bk-card-q .diary-card-val { color: #D2B4CC; }

/* обложка книги: 2:3, без картинки — название на плашке */
.bk-cover {
    display: block; position: relative; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
    background: var(--ph) center / cover no-repeat, linear-gradient(160deg, #26303c, #161c24);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bk-cover em {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px;
    font-style: normal; font-size: 9px; line-height: 1.25; text-align: center; color: var(--text-secondary);
}

/* ── читаю сейчас: лента обложек с прогрессом ── */
.bk-now {
    display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto;
    padding: 2px 2px 8px; margin-bottom: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bk-now::-webkit-scrollbar { display: none; }
.bk-now-b { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; min-width: 0; }
.bk-now-b:hover .bk-cover { transform: translateY(-2px); }
.bk-now-b .bk-cover { transition: transform .15s; }
.bk-prog { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bk-prog i { display: block; height: 100%; background: var(--accent, #5FB4C9); box-shadow: 0 0 6px rgba(95, 180, 201, .6); }
.bk-now-t, .bk-book-t {
    font-size: 10.5px; line-height: 1.3; color: var(--text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-now-s, .bk-book-s { font-size: 9.5px; color: var(--text-muted); letter-spacing: .2px; }

/* ── год месяцами: обложки в клетках ── */
.ghm-g .gh-cell.bk-c { background: var(--ph) center 28% / cover no-repeat, #141a21; cursor: pointer; }
.ghm-g .gh-cell.bk-c::after { opacity: .18; }
.ghm-g .gh-cell.bk-dim { opacity: .34; filter: saturate(.55); }
.ghm-g .gh-cell[data-d] { cursor: pointer; }
.ghm-g .gh-cell[data-d]:hover { filter: brightness(1.2); opacity: 1; }

/* ── по месяцам: столбик цитат, обложки дочитанного, минуты ── */
.bk-months {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 2px 0 16px;
    padding: 10px 8px 8px; border-radius: 12px; border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(22, 29, 38, .7), rgba(14, 19, 24, .85));
}
.bk-mcol { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; cursor: pointer; }
.bk-mq { position: relative; width: 100%; height: 72px; display: flex; align-items: flex-end; justify-content: center; }
.bk-mq i {
    display: block; width: 62%; min-height: 2px; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 45%, #141a21));
    box-shadow: 0 0 8px color-mix(in srgb, var(--mc) 35%, transparent);
}
.bk-mq b { position: absolute; top: -2px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 500; color: var(--mc); }
.bk-mf { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 22px; }
.bk-mf span {
    width: 14px; height: 21px; border-radius: 2px; background: var(--ph) center / cover no-repeat, #26303c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.bk-mf .bk-mf-x { display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--gold, #F4D136); background: #26303c; }
.bk-mf em { font-style: normal; font-size: 8.5px; color: var(--text-muted); }
.bk-mm { font-size: 8.5px; color: var(--text-muted); min-height: 11px; }
.bk-ml { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--mc); }
.bk-mcol:hover .bk-mq i { filter: brightness(1.2); }

/* ── полка дочитанного за год ── */
.bk-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 10px; margin-bottom: 16px; }
.bk-book { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; min-width: 0; }
.bk-book .bk-cover { transition: transform .15s; }
.bk-book:hover .bk-cover { transform: translateY(-2px) rotate(-.6deg); }

/* ── по годам: две дорожки — дочитал и цитаты ── */
.bk-ybar-tracks { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-ybar .diary-ybar-track { height: 5px; }
.bk-fill-f { background: var(--gold, #F4D136) !important; box-shadow: 0 0 6px rgba(244, 209, 54, .35); }
.bk-fill-q { background: #B592AE !important; box-shadow: 0 0 6px rgba(181, 146, 174, .35); }

/* ── месяц крупно и день ── */
.mz-d.bk-c { background: var(--ph) center 28% / cover no-repeat, #141a21; }
.mz-d.bk-dim { opacity: .42; filter: saturate(.55); }
.bk-badge {
    position: absolute; top: 4px; right: 4px; padding: 1px 4px; border-radius: 6px; font-size: 9px; font-weight: 500;
    background: rgba(8, 12, 15, .78); color: #D2B4CC; line-height: 1.3;
}
.bk-badge-f { top: auto; bottom: 4px; right: 4px; color: var(--gold, #F4D136); }
.bk-day { width: min(560px, 100%); }
.bk-drow {
    display: flex; gap: 12px; align-items: center; padding: 8px; margin-bottom: 6px; border-radius: 10px;
    text-decoration: none; color: inherit; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05);
}
.bk-drow:hover { border-color: color-mix(in srgb, var(--mc) 45%, transparent); }
.bk-drow .bk-cover { width: 46px; flex: none; }
.bk-drow-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-drow-t b { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.bk-drow-t small { font-size: 11px; color: var(--text-secondary); }
.bk-drow-t em { font-style: normal; font-size: 10.5px; color: var(--mc); }
.bk-qt { margin-top: 12px; }
.bk-q {
    margin: 0 0 10px; padding: 8px 10px 8px 12px; border-left: 2px solid var(--mc);
    background: color-mix(in srgb, var(--mc) 6%, transparent); border-radius: 0 8px 8px 0;
}
.bk-q p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.bk-q cite { font-style: normal; font-size: 10.5px; color: var(--text-muted); }

@media (max-width: 699px) {
    .bk-now { grid-auto-columns: 78px; gap: 8px; }
    .bk-months { gap: 2px; padding: 8px 4px 6px; }
    .bk-mq { height: 56px; }
    .bk-mq b, .bk-mm, .bk-ml { font-size: 8px; }
    .bk-mf span { width: 11px; height: 16px; }
    .bk-shelf { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; }
    .bk-badge { font-size: 8px; top: 2px; right: 2px; }
}