/* Reading: a bookshop's handwritten shelf cards. Cream paper, oxblood accents, book covers as the only pictures;
   the year's goal fills like a bookmark ribbon. */
:root { --page: #f5f0e6; --card: #fffdf8; --ink: #221a14; --soft: #66594c; --line: #ddd1bf; --field: #eee6d8; --act: #7a2430; --on-act: #ffffff; --stop: #b3261e; --wide: 660px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #14110d; --card: #1e1a14; --ink: #f2ebe0; --soft: #ada190; --line: #3a3127; --field: #14110d; --act: #e6919b; --on-act: #330a10; --stop: #ff8a80; color-scheme: dark; }
}
.goal .bar { height: 12px; border-radius: 6px; background: var(--field); overflow: hidden; } .goal .bar i { display: block; height: 100%; background: var(--act); }
.goal form label { flex: 0 1 160px; }
.books { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.books li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.books .cover { grid-row: 1 / span 3; width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; background: var(--field); display: grid; place-items: center; font-size: 22px; color: var(--soft); }
.books h3 { font-size: 17px; overflow-wrap: anywhere; } .books .by { color: var(--soft); font-size: 15px; }
.books .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.books .acts label { flex: 0 1 130px; font-size: 13px; }
.stars { display: flex; gap: 2px; } .stars button { min-height: 40px; min-width: 36px; padding: 0; background: transparent; color: var(--line); font-size: 22px; border-radius: 6px; }
.stars button.on { color: #c98a00; }
.results:empty { display: none; }
summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }