/* The book list as shelves that fill the window (see script.js). Applies once
   the script has set body.bookshelf; otherwise the page is the plain written
   list. */

/* No contents bar here: the shelves are the navigation. */
body.bookshelf nav.toc,
body.bookshelf .toc,
body.bookshelf .post-footer {
    display: none;
}

.bookshelf {
    --shelf-pad: 8px;
    --board: color-mix(in srgb, var(--yellow-ink) 26%, var(--lightcolor));
    --board-edge: color-mix(in srgb, var(--yellow-ink) 44%, var(--lightcolor));
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --edge-gap: 48px;
}

/* The whole window, not the reading column: header, title and shelves all
   run edge to edge. */
body.bookshelf .site-header,
body.bookshelf .main {
    max-width: none;
    padding-left: var(--edge-gap);
    padding-right: var(--edge-gap);
}

body.bookshelf .post-single {
    display: block;
    max-width: none;
}

body.bookshelf .post-header {
    max-width: none;
    margin: 0 0 6px;
}

body.bookshelf .post-header,
body.bookshelf .post-content > :not(.shelf-stage) {
    max-width: var(--main-width);
    margin-left: calc(var(--shelf-inset, 0px) + var(--shelf-pad, 8px));
}

/* Sizes (script.js reads these to fill the shelves). */
.shelves {
    --cover-w: 84px;
    --cover-h: 126px;
    --book-gap: 16px;
    --book-gap-max: 34px;
    margin: 34px 0 12px;
}

/* A shelf: covers standing on a thin board, their labels along its edge. The
   board ends with the last book on it. */
.shelf {
    position: relative;
    width: fit-content;
    margin-left: var(--row-inset, 0px);
    display: flex;
    align-items: flex-start;
    gap: var(--gap-fit, var(--book-gap));
    padding: 0 var(--shelf-pad);
    margin-bottom: 28px;
}

.shelf::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--cover-h);
    height: 6px;
    border-radius: 1px;
    background: linear-gradient(var(--board) 0 4px, var(--board-edge) 4px);
    box-shadow: 0 7px 10px -7px rgba(60, 40, 10, 0.3);
}

/* A book: its cover, then its number, title and author. */
.book {
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--cover-w);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.book:focus-visible {
    outline: none;
}

/* Muted at rest; picked up, it comes to full color and tips forward. */
body.bookshelf .post-content .book-cover {
    display: block;
    box-sizing: border-box;
    width: var(--cover-w);
    max-width: none;
    height: var(--cover-h);
    margin: 0;
    object-fit: cover;
    border-radius: 2px;
    mix-blend-mode: normal;
    background: color-mix(in srgb, var(--wash, var(--yellow)) 25%, var(--theme));
    box-shadow: 0 1px 2px rgba(60, 40, 10, 0.16), 0 3px 8px rgba(60, 40, 10, 0.08);
    filter: saturate(0.7) sepia(0.08);
    transform-origin: 50% 100%;
    transition: opacity 0.4s ease, filter 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}

body.bookshelf .post-content img.book-cover {
    opacity: 0;
}

body.bookshelf .post-content img.book-cover.loaded {
    opacity: 0.94;
}

body.bookshelf .post-content .book:focus-visible .book-cover,
body.bookshelf .post-content .book[aria-pressed="true"] .book-cover {
    opacity: 1;
    filter: none;
    transform: translateY(-4px) rotate(-1.5deg);
    box-shadow: 0 3px 6px rgba(60, 40, 10, 0.16), 0 9px 18px rgba(60, 40, 10, 0.14);
}

@media (hover: hover) {
    body.bookshelf .post-content .book:hover .book-cover {
        opacity: 1;
        filter: none;
        transform: translateY(-4px) rotate(-1.5deg);
        box-shadow: 0 3px 6px rgba(60, 40, 10, 0.16), 0 9px 18px rgba(60, 40, 10, 0.14);
    }
}

/* Its shelf label: small, horizontal, always there. */
.book-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Labels may use the gutter beside their cover, so whole words fit. */
    width: calc(100% + var(--gap-fit, var(--book-gap)) - 4px);
    margin-top: 13px;
    font-size: var(--step--3);
    line-height: 1.22;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.book-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--primary);
    text-decoration: underline 2px transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.book-num {
    font-variant-numeric: tabular-nums;
    color: var(--pink-ink);
}

.book-author {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--secondary);
}

.book:focus-visible .book-title,
.book[aria-pressed="true"] .book-title {
    text-decoration-color: var(--pink);
}

@media (hover: hover) {
    .book:hover .book-title {
        text-decoration-color: var(--pink);
    }
}

/* No cover image: one set in type, in a soft site color. */
.cover-set {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px 6px 7px;
    color: var(--primary);
    outline: 1px solid rgba(30, 30, 30, 0.35);
    outline-offset: -4px;
    text-align: center;
    overflow: hidden;
}

body.bookshelf .cover-set {
    background: color-mix(in srgb, var(--wash) 55%, var(--theme));
}

.set-title {
    font-size: 10px;
    line-height: 1.2;
}

.set-author {
    font-size: 6.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-cover.cover-set .set-title {
    font-size: 14px;
}

.panel-cover.cover-set .set-author {
    font-size: 9.5px;
}

/* ---- The panel: one section's notes ---- */
.book-panel {
    box-sizing: border-box;
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--content);
    background: var(--theme);
}

.book-panel p {
    margin: 0 0 12px;
}

.book-panel a {
    color: inherit;
    text-decoration: underline 1.5px color-mix(in srgb, var(--pink) 70%, transparent);
    text-underline-offset: 3px;
}

.panel-kicker {
    margin: 6px 0 0;
    white-space: nowrap;
}

.book-panel .panel-title {
    margin: 0;
    font-size: var(--step-2);
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.25;
    scroll-margin-top: 48px;
}

.panel-book {
    display: block;
}

/* Stars: only in the panel, never on the shelf. Unlit ones stay faint. */
.panel-stars,
.panel-stars-small {
    display: inline-block;
    letter-spacing: 0.12em;
    text-transform: none;
    white-space: nowrap;
    color: color-mix(in srgb, var(--border) 85%, var(--secondary));
}

.panel-stars {
    font-size: 17px;
}

.panel-stars-small {
    margin-left: 4px;
    font-size: 13px;
    font-weight: normal;
    vertical-align: 2px;
}

.panel-stars .on,
.panel-stars-small .on {
    color: var(--yellow-ink);
}

/* A half star: lit on its left half, faint on its right. */
.panel-stars .half,
.panel-stars-small .half {
    background: linear-gradient(90deg, var(--yellow-ink) 50%, color-mix(in srgb, var(--border) 85%, var(--secondary)) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.panel-book + .panel-book {
    margin-top: 4px;
}

.is-set .panel-book:not(.current) {
    font-weight: normal;
    color: var(--secondary);
}

.book-panel .panel-shared {
    margin: 10px 0 0;
    font-size: var(--step--2);
    font-style: italic;
    color: var(--secondary);
}

.panel-by {
    display: block;
    font-size: var(--step--2);
    font-weight: normal;
    color: var(--secondary);
}

.book-panel .panel-author {
    margin: 4px 0 0;
    color: var(--secondary);
    font-size: var(--step--1);
}

.panel-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 0 16px;
    margin-bottom: 18px;
}

.panel-head > :not(.panel-covers) {
    grid-column: 2;
}

.panel-covers {
    grid-row: 1 / 6;
    display: flex;
    align-items: flex-start;
}

/* Several books: their covers fanned out above the titles, overlapping as
   much as the width needs. */
.panel-head.is-set {
    display: block;
}

.is-set .panel-covers {
    --cw: 92px;
    margin: 6px 0 16px;
    padding-left: 2px;
}

.book-panel .is-set .panel-title {
    font-size: var(--step-1);
}

.book-panel .panel-cover {
    flex: none;
    display: block;
    width: var(--cw, 100px);
    max-width: none;
    height: auto;
    aspect-ratio: 2 / 3;
    margin: 0;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(60, 40, 10, 0.14), 0 8px 20px rgba(60, 40, 10, 0.12);
    transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
}

.book-panel img.panel-cover {
    opacity: 0;
    transition: opacity 0.35s ease, translate 0.3s var(--ease), rotate 0.3s var(--ease);
}

.book-panel img.panel-cover.loaded {
    opacity: 1;
}

.is-set .panel-cover {
    position: relative;
}

.book-panel .is-set .panel-cover + .panel-cover {
    margin-left: min(10px, (100% - var(--n) * var(--cw)) / (var(--n) - 1));
}

.is-set .panel-cover:nth-child(odd) { rotate: -2deg; }
.is-set .panel-cover:nth-child(even) { rotate: 1.5deg; translate: 0 3px; }

/* The book that was clicked comes forward; the rest of its set stays back. */
.book-panel .is-set .panel-cover:not(.current) {
    filter: saturate(0.55);
    opacity: 0.6;
}

.is-set .panel-cover.current {
    z-index: 2;
    rotate: 0deg;
    translate: 0 -6px;
}

/* Swapping sections: the new notes settle in. */
.panel-inner:not(.same) {
    animation: settle 0.4s var(--ease) backwards;
}

.panel-close {
    display: block;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--footersize);
    color: var(--secondary);
    cursor: pointer;
}

@media (hover: hover) {
    .panel-close:hover {
        color: var(--primary);
    }
}

.panel-grip {
    display: none;
}

/* Wide screens: the notes float in a quiet panel over the right of the
   window, and the shelves reflow into the space beside it (script.js). */
@media (min-width: 1100px) {
    .book-panel {
        position: fixed;
        z-index: 20;
        top: 84px;
        right: 24px;
        bottom: 24px;
        width: 440px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 26px 32px 18px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 2px 6px rgba(60, 40, 10, 0.06), 0 18px 44px rgba(60, 40, 10, 0.12);
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateX(16px);
        transition: opacity 0.25s ease, transform 0.35s var(--ease), visibility 0s linear 0.35s;
    }

    .panel-open .book-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.3s ease, transform 0.4s var(--ease);
    }

    .panel-close {
        float: right;
        margin: -8px 0 0 12px;
    }

    .panel-backdrop {
        display: none;
    }

    /* Open, the panel takes the right of the window, and the shelves reflow
       into what's left (its width and its 24px gaps either side). */
    .panel-open .shelf-stage {
        margin-right: calc(440px + 48px - var(--edge-gap));
    }
}

/* Narrower screens: notes come up in a sheet from the bottom. */
@media (max-width: 1099px) {
    .bookshelf {
        --edge-gap: var(--gap);
    }

    .book-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        max-height: 74vh;
        overflow-y: auto;
        padding: 10px 24px 32px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(60, 40, 10, 0.16);
        overscroll-behavior: contain;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.38s var(--ease), visibility 0s linear 0.38s;
    }

    .panel-body {
        max-width: var(--main-width);
        margin: 0 auto;
    }

    .panel-open .book-panel {
        transform: none;
        visibility: visible;
        transition: transform 0.38s var(--ease);
    }

    .panel-backdrop {
        position: fixed;
        inset: 0;
        z-index: 19;
        background: rgba(30, 25, 15, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .panel-open .panel-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .panel-grip {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: var(--border);
    }

    .panel-close {
        margin: 0 0 4px auto;
    }

    /* While a sheet is open, the "back to top" button would sit on it. */
    .panel-open .top-link {
        visibility: hidden;
    }
}

@media (max-width: 560px) {
    .shelves {
        --cover-w: 60px;
        --cover-h: 90px;
        --book-gap: 10px;
        --book-gap-max: 20px;
    }

    .bookshelf {
        --shelf-pad: 4px;
    }

    .book-label {
        margin-top: 12px;
    }

    .panel-head:not(.is-set) .panel-cover {
        --cw: 88px;
    }

    .is-set .panel-covers {
        --cw: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bookshelf .post-content .book-cover,
    .book-title,
    .book-panel,
    .panel-backdrop,
    .book-panel .panel-cover,
    .book-panel img.panel-cover {
        transition: none;
    }

    body.bookshelf .post-content .book:focus-visible .book-cover,
    body.bookshelf .post-content .book[aria-pressed="true"] .book-cover {
        transform: none;
    }

    @media (hover: hover) {
        body.bookshelf .post-content .book:hover .book-cover {
            transform: none;
        }
    }

    .is-set .panel-cover.current {
        translate: none;
    }

    .panel-inner:not(.same) {
        animation: none;
    }
}

/* Each review carries when it was written; the page itself shows no date. */
body.bookshelf .post-header .post-meta {
    display: none;
}

.panel-written {
    margin: 4px 0 0;
    font-size: var(--footersize);
    font-style: italic;
    color: var(--secondary);
}