/* Shelf style A "Klassisch" (spec 2026-10-11 §6, polish 2026-10-12,
   component ClassicShelf). Colours come from the --shelf-* tokens each
   theme sets (tokens.css, themes/*.css); decor, objects, plaque and glow
   from shelf-shared.css; --zoom is the library's book-size setting. The
   legacy shelf's .shelf-* rules in app.css are untouched by this file. */

.classic-shelf {
    --shelf-texture: url("../images/library/shelf-wood-texture.webp");
    --shelf-leather: url("../images/themes/books/leather_grain.webp");
    /* The tallest book (222 px) plus a fixed band, so the plaque above a
       compartment keeps clear of its books at every zoom. */
    --classic-row-height: calc(222px * var(--zoom, 1) + 24px);
    --classic-cabinet-pad: 30px;
    --classic-row-inset: 18px;
    position: relative;
    /* Room above the cornice for the decor. */
    padding: 176px 64px 36px;
    border-radius: var(--radius-lg);
    background: var(--shelf-room);
}

.classic-shelf-cabinet {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--classic-cabinet-pad) 24px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(var(--shelf-wood-tint), var(--shelf-wood-tint)), var(--shelf-texture) center / 420px, var(--shelf-wood);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* ---- Cornice: a top surface seen from slightly above, then the moulded
   front with a gilt rule. The decor stands on the top surface. ---- */

.classic-shelf-cornice {
    position: relative;
    height: 62px;
    margin: 0 calc(var(--classic-cabinet-pad) * -1 - 18px) 18px;
}

.classic-shelf-cornice-top {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 20px;
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(255, 226, 175, 0.14) 70%, rgba(255, 226, 175, 0.32)),
        linear-gradient(var(--shelf-wood-tint), var(--shelf-wood-tint)),
        var(--shelf-texture) 0 30% / 520px,
        var(--shelf-wood);
}

.classic-shelf-cornice-front {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 42px;
    border-radius: 2px 2px 4px 4px;
    background:
        linear-gradient(180deg, rgba(255, 226, 175, 0.32) 0 2px, rgba(0, 0, 0, 0.12) 2px 60%, rgba(0, 0, 0, 0.45)),
        linear-gradient(var(--shelf-wood-tint), var(--shelf-wood-tint)),
        var(--shelf-texture) center / 420px,
        var(--shelf-wood);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5);
}

.classic-shelf-cornice-front::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 13px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--shelf-brass) 10%, var(--shelf-brass-hi) 50%, var(--shelf-brass) 90%, transparent);
    opacity: 0.85;
}

/* Decor stands with its baked contact shadow on the top surface. */
.classic-shelf-decor {
    bottom: 44px;
}

.classic-shelf-decor.shelf-decor--left {
    left: 46px;
    background-position: left bottom;
}

.classic-shelf-decor.shelf-decor--right {
    right: 40px;
    background-position: right bottom;
}

.classic-shelf-glow {
    right: 0;
    bottom: 30px;
}

.classic-shelf-post {
    position: absolute;
    top: 62px;
    bottom: 0;
    width: var(--classic-cabinet-pad);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 220, 160, 0.08) 40%, rgba(0, 0, 0, 0.5)), var(--shelf-texture) center / 300px, var(--shelf-wood);
}

.classic-shelf-post--left { left: 0; }
.classic-shelf-post--right { right: 0; }

/* Zero-height element with the rows' own horizontal insets: what
   shelfLayout.js measures. */
.classic-shelf-measure {
    height: 0;
    margin: 0 calc(6px + var(--classic-row-inset));
}

/* ---- Boards ---- */

.classic-shelf-bay {
    position: relative;
    margin: 0 6px 26px;
}

/* "Zuletzt gelesen": room above the covers for the plaque and badges. */
.classic-shelf-bay--recent .classic-shelf-back {
    height: calc(var(--classic-row-height) + 48px);
}

.classic-shelf-bay:last-of-type {
    margin-bottom: 4px;
}

.classic-shelf-back {
    position: relative;
    height: calc(var(--classic-row-height) + 26px);
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 50% 0%, var(--shelf-light), transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.78)),
        var(--shelf-texture) center / 520px,
        var(--shelf-wood);
    box-shadow: inset 0 18px 30px rgba(0, 0, 0, 0.75), inset 0 -10px 20px rgba(0, 0, 0, 0.6), inset 14px 0 24px rgba(0, 0, 0, 0.6), inset -14px 0 24px rgba(0, 0, 0, 0.6);
}

.classic-shelf-row {
    position: absolute;
    left: var(--classic-row-inset);
    right: var(--classic-row-inset);
    bottom: 0;
    height: var(--classic-row-height);
    display: flex;
    align-items: flex-end;
}

/* Contact shadow along the board, behind the books. */
.classic-shelf-row::before {
    content: "";
    position: absolute;
    left: calc(var(--classic-row-inset) * -1);
    right: calc(var(--classic-row-inset) * -1);
    bottom: 0;
    height: 26px;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}

.classic-shelf-plank {
    position: relative;
    z-index: 5;
    height: 20px;
    margin: 0 -6px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 225, 170, 0.3), rgba(0, 0, 0, 0.22) 40%, rgba(0, 0, 0, 0.55)), var(--shelf-texture) center / 380px, var(--shelf-wood);
    box-shadow: 0 14px 18px -6px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 230, 180, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

/* One compartment on a board: its plaque above its books. */
.classic-shelf-group {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.classic-shelf-group + .classic-shelf-group {
    margin-left: calc(44px * var(--zoom, 1));
}

/* The plaque hangs in the headroom above the row, clear of tall books. */
.classic-shelf-plaque {
    position: absolute;
    z-index: 6;
    left: 0;
    top: -24px;
    max-width: 320px;
}

/* ---- Books ---- */

.classic-shelf-slot {
    position: relative;
    flex: none;
    width: var(--w);
    height: var(--h);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.classic-shelf-slot:focus-visible {
    outline: none;
}

.classic-shelf-book {
    --classic-tip: perspective(900px) translateY(calc(var(--h) / 2)) rotateX(-13deg) translateY(calc(var(--h) / -2));
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* The top edge of the book: boards and the page block, lying back into the
   shelf. Seen only once the book is tipped out (from below it faces away). */
.classic-shelf-top {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(110px * var(--zoom, 1));
    transform-origin: 50% 100%;
    transform: rotateX(90deg);
    backface-visibility: hidden;
    background:
        linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.55)),
        repeating-linear-gradient(90deg, rgba(120, 95, 60, 0.18) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, var(--c) 0 3px, #e8dcbd 3px calc(100% - 3px), var(--c) calc(100% - 3px));
}

.classic-shelf-spine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2px 2px 1px 1px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.62)),
        var(--shelf-leather) center / 180px,
        var(--c);
    background-blend-mode: normal, multiply, normal;
    /* Depth: shadow onto the next book, the bottom sits in its own shade. */
    box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    transition: filter 0.3s ease, box-shadow 0.4s ease;
}

/* Headband at the top of the spine. */
.classic-shelf-spine::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 1px;
    right: 1px;
    top: 0;
    height: calc(4px * var(--zoom, 1));
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #8a2a1e) 0 2px, #e8d6a4 2px 4px);
    opacity: 0.85;
}

/* Raised bands with a gilt line. */
.classic-shelf-band {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.18) 45%, rgba(0, 0, 0, 0.45));
}

.classic-shelf-band::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: var(--shelf-brass-hi);
    opacity: 0.85;
}

.classic-shelf-band--1 { top: 5%; }
.classic-shelf-band--2 { top: 14%; }
.classic-shelf-band--3 { bottom: 14%; }
.classic-shelf-band--4 { bottom: 5%; }

/* Title piece: a darker panel of the book's own colour, so the gilt title
   stays readable on light covers too. */
.classic-shelf-label {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 18%;
    bottom: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px 0;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05)), color-mix(in srgb, var(--c) 45%, #0b0705);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shelf-brass) 70%, transparent), inset 0 0 0 3px rgba(0, 0, 0, 0.35);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Size and lines are set per book (ShelfBookBase.TitleFit). */
.classic-shelf-label span {
    display: -webkit-box;
    overflow: hidden;
    max-height: 100%;
    color: var(--shelf-brass-hi);
    font: 700 var(--title-size, calc(11px * var(--zoom, 1))) / 1.05 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-lines, 1);
    overflow-wrap: anywhere;
}

.classic-shelf-ornament {
    position: absolute;
    left: 50%;
    top: 77.5%;
    width: 44%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--shelf-brass-hi), var(--shelf-brass-lo));
    -webkit-mask: url("../images/themes/books/fleuron.svg") center / contain no-repeat;
    mask: url("../images/themes/books/fleuron.svg") center / contain no-repeat;
    opacity: 0.9;
}

/* Hover and keyboard focus: the book is tipped out by its top, as a finger
   would -- it turns about its foot, which stays on the board, with its own
   perspective (eye at its middle), so it never drifts into a neighbour. */
@media (hover: hover) {
    .classic-shelf-slot:hover {
        z-index: 20;
    }

    .classic-shelf-slot:hover .classic-shelf-book {
        transform: var(--classic-tip);
    }

    .classic-shelf-slot:hover .classic-shelf-spine {
        filter: brightness(1.15);
        box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.6), 0 18px 16px -10px rgba(0, 0, 0, 0.75);
    }
}

.classic-shelf-slot:focus-visible {
    z-index: 20;
}

.classic-shelf-slot:focus-visible .classic-shelf-book {
    transform: var(--classic-tip);
}

.classic-shelf-slot:focus-visible .classic-shelf-spine {
    outline: 2px solid var(--shelf-brass-hi);
    outline-offset: 2px;
}

/* ---- "Zuletzt gelesen": covers facing out ---- */

.classic-shelf-slot--display {
    perspective: 900px;
}

.classic-shelf-display {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    transform: rotateX(5deg);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

.classic-shelf-display-cover {
    position: absolute;
    inset: 0 5px 0 0;
    overflow: hidden;
    border-radius: 2px 4px 4px 2px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.08) 6%, transparent 12%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 45%),
        var(--shelf-leather) center / 220px,
        var(--c);
    background-blend-mode: normal, normal, multiply, normal;
    box-shadow: 0 16px 22px -10px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.classic-shelf-display-cover img {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: classic-shelf-fade 0.4s ease both;
}

@keyframes classic-shelf-fade {
    from { opacity: 0; }
}

/* The spine hinge on the left and a soft sheen over pictures too. */
.classic-shelf-display-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.12) 4%, transparent 9%), linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 40%);
}

.classic-shelf-display-cover:not(.has-image)::before {
    content: "";
    position: absolute;
    inset: 8px 8px 8px 12px;
    border: 1px solid color-mix(in srgb, var(--shelf-brass) 60%, transparent);
    border-radius: 2px;
}

.classic-shelf-display-rosette {
    position: absolute;
    left: 52%;
    top: 54%;
    width: 40%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, var(--shelf-brass-hi), var(--shelf-brass-lo));
    -webkit-mask: url("../images/themes/books/rosette.svg") center / contain no-repeat;
    mask: url("../images/themes/books/rosette.svg") center / contain no-repeat;
    opacity: 0.85;
}

.classic-shelf-cover-title,
.classic-shelf-cover-author {
    position: absolute;
    z-index: 4;
    left: 14%;
    right: 10%;
    overflow: hidden;
    color: var(--shelf-brass-hi);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.classic-shelf-cover-title {
    top: 13%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font: 700 calc(16px * var(--zoom, 1)) / 1.1 "Cormorant Garamond", Georgia, serif;
}

.classic-shelf-cover-author {
    bottom: 14%;
    font: 500 calc(10px * var(--zoom, 1)) / 1.2 var(--font-family-ui);
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Over a real cover the text sits on a soft shade -- or not at all when
   the "Titel/Autor auf Regal-Cover" setting is off. */
.has-image > .classic-shelf-cover-title,
.has-image > .classic-shelf-cover-author {
    padding: 3px 4px;
    border-radius: 2px;
    background: rgba(10, 6, 3, 0.72);
}

.has-image.hide-text > .classic-shelf-cover-title,
.has-image.hide-text > .classic-shelf-cover-author {
    display: none;
}

.classic-shelf-progress {
    position: absolute;
    z-index: 4;
    left: 14%;
    right: 10%;
    bottom: 7%;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
}

.classic-shelf-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--shelf-brass-hi);
}

/* Page block seen from the side. */
.classic-shelf-display-pages {
    position: absolute;
    top: 3px;
    bottom: 2px;
    right: 0;
    width: 6px;
    border-radius: 0 2px 2px 0;
    background: repeating-linear-gradient(90deg, #efe2c2 0 1px, #d2c096 1px 2px);
    box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.35);
}

.classic-shelf-display-percent {
    position: absolute;
    z-index: 5;
    /* inside the cover's top corner, clear of the plaque above */
    left: 8px;
    top: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--shelf-brass-hi), var(--shelf-brass));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: var(--shelf-plaque-ink);
    font: 700 0.7rem/1.4 var(--font-family-ui);
}

@media (hover: hover) {
    .classic-shelf-slot--display:hover .classic-shelf-display {
        transform: rotateX(0deg);
        filter: brightness(1.08);
    }
}

.classic-shelf-slot--display:focus-visible .classic-shelf-display {
    transform: rotateX(0deg);
}

.classic-shelf-slot--display:focus-visible .classic-shelf-display-cover {
    outline: 2px solid var(--shelf-brass-hi);
    outline-offset: 2px;
}

/* ---- Narrow screens: slimmer cabinet, one smaller decor object ---- */

@media (max-width: 900px) {
    .classic-shelf {
        padding: 160px 18px 24px;
    }
}

@media (max-width: 640px) {
    .classic-shelf {
        --classic-cabinet-pad: 12px;
        --classic-row-inset: 8px;
        padding: 124px 6px 16px;
    }

    .classic-shelf-cornice {
        height: 52px;
        margin: 0 calc(var(--classic-cabinet-pad) * -1 - 6px) 14px;
    }

    .classic-shelf-cornice-front {
        top: 16px;
        height: 36px;
    }

    .classic-shelf-decor {
        bottom: 36px;
    }

    .classic-shelf-decor.shelf-decor--left {
        left: 18px;
        height: calc(var(--decor-h) * 0.6);
    }

    .classic-shelf-decor.shelf-decor--right,
    .classic-shelf-glow {
        display: none;
    }

    .classic-shelf-bay {
        margin: 0 2px 22px;
    }

    .classic-shelf-measure {
        margin: 0 calc(2px + var(--classic-row-inset));
    }

    .classic-shelf-plaque {
        max-width: 200px;
        font-size: 0.72rem;
    }

    .classic-shelf-display-cover .classic-shelf-cover-title {
        font-size: calc(13px * var(--zoom, 1));
    }

    .classic-shelf-display-cover .classic-shelf-cover-author {
        font-size: calc(9px * var(--zoom, 1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .classic-shelf-book,
    .classic-shelf-spine,
    .classic-shelf-display {
        transition: none;
    }

    .classic-shelf-display-cover img {
        animation: none;
    }
}