/* Starter cookbooks from the shared library. Marked with a warm spine so they
   read as reference material rather than something of yours that went stale. */
.ckb-folder.ckb-starter .ckb-folder-spine { background: var(--accent); opacity: 0.55; }
.ckb-blurb { display: block; margin-top: 3px; opacity: 0.72; line-height: 1.35; }

/* ---------- the bookshelf ----------
 * Cookbooks stand as books rather than sitting as rows. The plank is a bottom
 * border on each cell rather than a background on the container: adjacent
 * borders join into one continuous shelf, and it stays aligned however the
 * grid wraps — a repeating background would need the row height pinned and
 * would drift the moment a name ran to two lines. */

.ckb-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    align-items: end;
    margin-bottom: var(--s3);
}

.ckb-book {
    /* .ckb-folder in game.css makes these full-width bordered rows. A book is
       none of those things, and every one of these has to be undone by name —
       a grid item left at width:100% is what makes a shelf look like a list. */
    width: auto;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: var(--s2) 4px 6px;
    /* One continuous plank: adjacent bottom borders butt together, so this must
       stay a plain border. An inset shadow here segmented it into one short
       plank per book, with a visible seam between every pair. */
    border-bottom: 7px solid #8a5a34;
    background: none;
    cursor: pointer;
    text-align: center;
    min-width: 0;
}

@media (hover: hover) {
    /* Lifting the book off the shelf, which is what picking one up looks like.
       The background must be cleared too: .ckb-folder:hover tints the whole row,
       which on a book is a grey box behind it. */
    .ckb-book:hover { background: none; border-color: transparent; }
    .ckb-book:hover .ckb-book-cover { transform: translateY(-3px); }
}
.ckb-book:active .ckb-book-cover { transform: translateY(-1px); }

.ckb-book-cover {
    display: block;
    width: 64px;
    height: 96px;
    image-rendering: pixelated;          /* pixel art, never smoothed */
    transition: transform 0.12s ease-out;
    /* Sits on the plank, so its own shadow is what makes it stand rather than
       float. */
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.18));   /* what makes it stand on the plank */
}

.ckb-book-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    width: 100%;
}
.ckb-book-label strong {
    font-size: 0.82rem;
    line-height: 1.25;
    /* Two lines, then an ellipsis — a long name must not shove the plank down
       past its neighbours and break the shelf line. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ckb-book-label small { font-size: 0.68rem; color: var(--text-dim); }
.ckb-book-label .ckb-blurb { display: none; }   /* no room on a spine-sized cell */

/* The pencil, only on books you own. Small and quiet until the book is
   touched, because it is not the main thing you do to a cookbook. */
.ckb-book-recover {
    position: absolute;
    top: 2px; right: 2px;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: #fff; font-size: 0.72rem; line-height: 1;
    cursor: pointer; opacity: 0;
    transition: opacity 0.12s ease-out;
}
.ckb-book:hover .ckb-book-recover,
.ckb-book:focus-within .ckb-book-recover { opacity: 1; }

/* 26px reads right on a book cover; a 26px tap target does not. The finger
   gets its 44 and the layout keeps its 26 — the same trick the KGE speaker
   and the duel's commit arrow use. */
.ckb-book-recover::after { content: ""; position: absolute; inset: -9px; }
/* Touch has no hover, so it is always there on a touch device. */
@media (hover: none) { .ckb-book-recover { opacity: 0.85; } }

.ckb-book .ui-grip { position: absolute; top: 2px; left: 2px; opacity: 0.45; }

/* ---------- choosing a cover ---------- */
.ckb-coverpick { margin: var(--s2) 0 var(--s3); }
.ckb-covers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s2);
}
.ckb-cover {
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    line-height: 0;
    min-height: 44px;                    /* a real tap target */
}
.ckb-cover img {
    width: 40px; height: 60px;
    image-rendering: pixelated;
    display: block;
}
.ckb-cover.chosen { border-color: var(--accent); background: rgba(242, 115, 77, 0.12); }
@media (hover: hover) { .ckb-cover:hover { border-color: rgba(242, 115, 77, 0.5); } }

@media (max-width: 420px) {
    .ckb-shelf { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .ckb-book-cover { width: 56px; height: 84px; }
}