.notes-preview { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; max-width:960px; margin:20px auto 0; padding:0 30px; font:14px/1.5 Arial,sans-serif; }
.book-note { grid-column:1; grid-row:1; min-width:0; }
.book-note summary { cursor:pointer; list-style:none; color:var(--link); }
.book-note summary::-webkit-details-marker { display:none; }
.book-note summary cite { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.book-note summary svg { display:inline-block; vertical-align:baseline; width:15px; height:15px; margin-left:7px; color:var(--accent); transition:transform 180ms ease; }
.book-note summary:hover cite { text-decoration-thickness:2px; }
.book-note summary:hover svg,.book-note[open] summary svg { transform:rotate(45deg); }
.book-note summary:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.book-note-card { margin:12px 4px 8px 0; padding:16px; background:var(--card); border:1px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.book-note-card p { margin:0; font-size:1rem; line-height:1.5; }
.book-source { display:inline-block; margin-top:12px; font:13px/1.5 Arial,sans-serif; }
.bookshelf-list li:has(.book-note) { align-items:start; }
@media(max-width:520px) { .notes-preview { padding:0 22px; } .book-note summary { min-height:26px; } }
@media(prefers-reduced-motion:reduce) { .book-note summary svg { transition:none; } }
@media print { .notes-preview { display:none; } .book-note-card { box-shadow:none; } }

/* Opening a note: the card unfolds (height eases from 0 to auto) and settles in; the star turns on a spring.
   ::details-content + interpolate-size animate the native <details>; browsers without them get a short fade-in. */
@media(prefers-reduced-motion:no-preference) {
  .book-note { interpolate-size:allow-keywords; }
  .book-note summary svg { transition:transform 520ms cubic-bezier(.34,1.56,.64,1); }
  .book-note::details-content { block-size:0; opacity:0; overflow:clip; overflow-clip-margin:6px;
    transition:block-size 460ms cubic-bezier(.2,.7,.2,1), opacity 320ms ease, content-visibility 460ms allow-discrete; }
  .book-note[open]::details-content { block-size:auto; opacity:1; }
  .book-note .book-note-card { translate:0 -8px; scale:.98; transform-origin:top left; transition:translate 520ms cubic-bezier(.34,1.56,.64,1), scale 520ms cubic-bezier(.34,1.56,.64,1); }
  .book-note[open] .book-note-card { translate:0 0; scale:1; }
  @supports not selector(::details-content) {
    .book-note[open] .book-note-card { animation:note-in 380ms cubic-bezier(.2,.7,.2,1) both; }
  }
}
@keyframes note-in { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }