/* Librarium — pagine Libro, Scansiona, Libreria (scaffali + elenco) e Desideri, dal concept «Biblioteca Mia».
   Usa i gettoni di app.css (con riserva: valori esatti del concept). Niente stili in linea: solo variabili via CSSOM. */

/* --- comuni ------------------------------------------------------------------------ */
.book-page, .scan-page { --bleed: 20px; }
@media (min-width: 600px) { .book-page, .scan-page { --bleed: 28px; } }
@keyframes pg-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pg-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* testata: occhiello, titolo, interruttore di vista */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
.lib-head-t { min-width: 0; }
.lib-head h1 { margin: 2px 0 0; font-size: 1.875rem; line-height: 1; }
.eyebrow-line, .lib-head .summary { margin: 0; font: 600 .8125rem/1.3 var(--sans, "Manrope", sans-serif); color: var(--seppia, #5E5248); }
.view-toggle { display: flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--pergamena, #EDE4D3); flex: none; }
.view-toggle a { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--inchiostro, #231A14); text-decoration: none; transition: background .25s var(--ease, ease); }
.view-toggle a .icon { width: 20px; height: 20px; }
.view-toggle a[aria-current="page"] { background: var(--avorio, #FFFDF8); box-shadow: 0 4px 12px -6px rgb(35 26 20 / .35); }
.view-toggle a:hover { color: var(--inchiostro, #231A14); background: color-mix(in srgb, var(--avorio, #FFFDF8) 55%, transparent); }
@media (pointer: coarse) { .view-toggle a { width: 44px; height: 44px; } }

/* stanze */
.lib-rooms { display: flex; gap: 8px; overflow-x: auto; padding: 18px 20px 2px; margin: 0 -20px; scrollbar-width: none; }
.lib-rooms::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .lib-rooms { margin-inline: -28px; padding-inline: 28px; } }
@media (min-width: 1024px) { .lib-rooms { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }
button.room-chip { height: 40px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 700 .8125rem/1.2 var(--sans, sans-serif); white-space: nowrap; flex: none; gap: 6px;
  background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); box-shadow: none; }
button.room-chip .n { opacity: .7; font-variant-numeric: tabular-nums; }
button.room-chip[aria-pressed="true"] { background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); }
button.room-chip.add .icon { width: 16px; height: 16px; }

/* --- Libreria: elenco ------------------------------------------------------------------ */
.lib-page .search { margin-top: 16px; }
.lib-page .chips.lib-filters { padding-top: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
@media (min-width: 600px) { .lib-page .chips.lib-filters { margin-inline: -28px; padding-inline: 28px; } }
@media (min-width: 1024px) { .lib-page .chips.lib-filters { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }
.lib-page .chips.lib-filters::-webkit-scrollbar { display: none; }
.lib-filters .chip { min-height: 44px; height: 40px; padding: 0 14px; flex: none; }
.lib-tools { align-items: center; }
a.lib-group-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 700 var(--step--1, 13px)/1.2 var(--sans, sans-serif);
  color: var(--inchiostro, #231A14); background: transparent; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2, rgb(35 26 20 / .14)); }
@media (max-width: 480px) { .lib-tools { flex-wrap: wrap; } .lib-tools .lib-tool { flex: 1 1 10rem; max-width: none; } a.lib-group-link { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; flex: none; }
  a.lib-group-link .icon { width: 20px; height: 20px; } }
a.lib-group-link[aria-pressed="true"] { background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); box-shadow: none; }

ul.books.lib-rows { background: transparent; border: 0; box-shadow: none; padding: 0; display: grid; gap: 8px; margin-top: 12px; }
ul.books.lib-rows > li { border: 0; animation: pg-rise var(--t-enter, .7s) var(--ease, ease) both; }
ul.books.lib-rows > li:nth-child(2) { animation-delay: 40ms; } ul.books.lib-rows > li:nth-child(3) { animation-delay: 80ms; }
ul.books.lib-rows > li:nth-child(4) { animation-delay: 120ms; } ul.books.lib-rows > li:nth-child(n+5) { animation-delay: 160ms; }
.lib-rows .book { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .06)); box-shadow: 0 1px 0 rgb(35 26 20 / .02); }
.lib-rows a.book:hover { background: var(--avorio, #FFFDF8); box-shadow: var(--shadow, 0 14px 30px -22px rgb(35 26 20 / .45)); }
.lib-rows .book > .cover, .lib-rows .book > .cover-wrap { width: 42px; height: 62px; border-radius: 2px 5px 5px 2px; box-shadow: 0 8px 14px -8px rgb(35 26 20 / .7); }
.lib-rows .cover-gen .cover-initial { font-size: 1.2rem; }
.lib-rows .book .title { font: 800 .9375rem/1.25 var(--sans, sans-serif); letter-spacing: 0; }
.lib-rows .book .meta { font-size: .8125rem; font-weight: 500; }
.lib-rows .stars.small { --star: .8rem; }
.g-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.g-chip { font: 700 .75rem/1.2 var(--sans, sans-serif); padding: 3px 8px; border-radius: 8px; background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.lib-rows .badges:empty { display: none; }
.lib-rows .badges { margin-top: 6px; }
.book-where { display: grid; justify-items: end; text-align: right; gap: 1px; max-width: min(9.5rem, 32vw); min-width: 0; font: 700 .75rem/1.25 var(--sans, sans-serif); color: var(--inchiostro, #231A14); }
.book-where > span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.bw-room { font: 800 .75rem/1.3 var(--sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta-text, #B4532A); }
.bw-shelf { color: var(--seppia, #5E5248); font-weight: 600; }
@media (max-width: 380px) { .lib-rows .book { grid-template-columns: 42px minmax(0, 1fr); } .book-where { grid-column: 2; justify-items: start; text-align: left; max-width: none; display: flex; flex-wrap: wrap; gap: 0 6px; } }
.lib-page .group h2 { margin-top: 22px; }

/* --- Libreria: scaffali ------------------------------------------------------------------ */
/* il Classico come nel concept: cornice di noce, fondo di noce scuro con luce calda dall'alto, mensole chiare */
:root, [data-style="classico"] {
  --p0: #1E4434; --q0: #E9D9B4; --p1: #A84B26; --q1: #FBEBD8; --p2: #C9973F; --q2: #2A1A0C; --p3: #6B2D2A; --q3: #F0DCC4;
  --p4: #EFE6D6; --q4: #6B2D2A; --p5: #3F5C6E; --q5: #F3E9D8; --p6: #2B2420; --q6: #D9A441; --p7: #5A3E5D; --q7: #EEDFC9;
}
[data-style="classico"] {
  --case-bg: radial-gradient(90% 60% at 70% 0%, #5A3E2B 0%, #2E2018 70%);
  --case-shadow: none;
  --case-radius: 12px;
  --back: transparent;
  --board: linear-gradient(#B07D50, #7A4F2E);
  --board-h: 12px;
  --board-shadow: 0 8px 12px -4px rgb(0 0 0 / .6);
  --label: rgb(246 239 228 / .72); --label-font: 700 .75rem/1.2 var(--sans, sans-serif);
  --frame-solid: var(--noce, #6E4529);
  --fade: rgb(30 20 14 / .8);
  --hi: var(--albicocca, #F2B98C);
}
.bookcase[data-style="classico"] .case-body { width: 100%; min-width: 0; padding: 14px 12px 16px; border-radius: 22px; background: var(--noce, #6E4529);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 40px -24px rgb(35 26 20 / .8); --base-h: 16px; --crown-h: 14px; }
.bookcase[data-style="classico"] .case-base { display: none; }
.bookcase[data-style="classico"] .case-frame { padding: 34px 10px 2px; }
.bookcase[data-style="classico"] .case-fade { top: 14px; bottom: 16px; }
.bookcase[data-style="classico"] .case-fade.l { left: 12px; border-radius: 12px 0 0 12px; }
.bookcase[data-style="classico"] .case-fade.r { right: 12px; border-radius: 0 12px 12px 0; }
.bookcase[data-style="classico"] .shelf-row { display: block; width: max-content; min-width: max(100%, calc(var(--cap) * var(--unit, 34px))); padding: 0 4px var(--board-h); }
.bookcase[data-style="classico"] .shelf-row::after { border-radius: 2px; }
.bookcase[data-style="classico"] .shelf-no, .bookcase[data-style="classico"] .shelf-count { display: none; }
.bookcase[data-style="classico"] .shelf-books { gap: 2px; padding: 0 4px; }
.bookcase[data-style="classico"] .shelf-row + .shelf-label { position: sticky; left: 0; }
.shelf-label { display: none; }
.bookcase[data-style="classico"] .shelf-label { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px 18px; font: 700 .75rem/1.2 var(--sans, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: rgb(246 239 228 / .72); width: min(100%, calc(100vw - 96px)); }
.bookcase[data-style="classico"] .shelf-label:last-child { padding-bottom: 6px; }
.shelf-label-n { font-variant-numeric: tabular-nums; opacity: .8; }
.bookcase[data-style="classico"] .shelf-row.over + .shelf-label .shelf-label-n { color: #F4A08A; opacity: 1; }
.bookcase[data-style="classico"] .spine { box-shadow: inset 2px 0 0 rgb(255 255 255 / .16), inset -3px 0 0 rgb(0 0 0 / .22); border-radius: 2px 2px 1px 1px;
  background:
    linear-gradient(180deg, transparent 9px, color-mix(in srgb, var(--sp-ink) 40%, transparent) 9px 11px, transparent 11px),
    linear-gradient(0deg, transparent 10px, color-mix(in srgb, var(--sp-ink) 40%, transparent) 10px 12px, transparent 12px),
    var(--sp); }
.bookcase[data-style="classico"] .spine.face { background: var(--sp); }
.bookcase[data-style="classico"] .spine-a { opacity: .85; }
.bookcase[data-style="classico"] .shelf-empty { color: rgb(246 239 228 / .6); }

/* il libro trovato: alone albicocca che pulsa (2,2 s) e segnaposto terracotta sopra */
@keyframes found-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--albicocca, #F2B98C), 0 0 16px 2px rgb(242 185 140 / .55); } 50% { box-shadow: 0 0 0 2px var(--albicocca, #F2B98C), 0 0 28px 8px rgb(242 185 140 / .8); } }
@keyframes pin-bob { 0%, 100% { transform: translate(-50%, 0) rotate(-45deg); } 50% { transform: translate(-50%, -4px) rotate(-45deg); } }
.bookcase .spine.found { z-index: 4; outline: 0; transform: none; animation: found-glow 2.2s ease-in-out infinite; }
.bookcase .spine.found:hover { transform: translateY(-3px); }
.found-pin { position: absolute; left: var(--x, 50%); bottom: calc(var(--y, 100px) + 10px); width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--terracotta, #C25A2E);
  transform: translate(-50%, 0) rotate(-45deg); z-index: 5; pointer-events: none; box-shadow: 0 4px 10px -2px rgb(0 0 0 / .5); animation: pin-bob 1.6s ease-in-out infinite; }
.found-pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #F6EFE4; }
.bookcase[data-style="classico"] .spine.pulled { outline: 2px solid var(--albicocca, #F2B98C); outline-offset: 1px; }

/* pagina scaffali */
.shelf-page .shelf-tools { margin: 14px 0 0; gap: 10px; flex-wrap: nowrap; }
.shelf-find { flex: 1 1 auto; }
.shelf-find > input { min-height: 46px; border-radius: 14px; font-size: .875rem; }
.shelf-page .seg.shelf-mode { margin: 0; flex: none; border-radius: 14px; }
.shelf-page .seg.shelf-mode .seg-opt { padding-inline: 10px; min-height: 44px; }
@media (max-width: 420px) { .shelf-page .seg.shelf-mode .seg-opt { font-size: 0; gap: 0; width: 44px; padding: 0; } .shelf-page .seg.shelf-mode .seg-opt .icon { width: 20px; height: 20px; } }
.shelf-page .bookcase { margin: 18px 0 8px; animation: pg-rise var(--t-enter, .7s) var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
@media (max-width: 599px) { .shelf-page .bookcase[data-style="classico"] .case-body { margin-inline: -4px; width: calc(100% + 8px); } }
.case-head { align-items: flex-end; }
.case-head h2 { font-size: 1.45rem; margin: 0; }
.case-room { margin: 0 0 2px; font: 800 .75rem/1.2 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta-text, #B4532A); }
.case-head .meta { font-size: .75rem; }
.case-head .row { gap: 6px; }
.shelf-hint { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font: 600 .8125rem/1.35 var(--sans, sans-serif); color: var(--seppia, #5E5248); }
.shelf-hint .icon { width: 18px; height: 18px; flex: none; }
.shelf-hint .hint-more { font-weight: 500; }
@media (max-width: 420px) { .shelf-hint .hint-more { display: none; } }

/* scheda del libro scelto / trovato: avorio, dorso in miniatura, «Apri» */
.spine-card { position: relative; bottom: auto; z-index: 6; display: block; margin: 14px 0 0; padding: 14px; border-radius: 20px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .08)); box-shadow: var(--shadow-lift, 0 26px 44px -24px rgb(35 26 20 / .55)); animation: pg-up .45s var(--ease, ease) both; }
.spine-card-top { display: flex; align-items: center; gap: 14px; }
.sc-spine { width: 10px !important; height: 52px !important; border-radius: 3px; background: var(--sp, #1D2B45) !important; flex: none; }
.spine-card.is-found .sc-spine { box-shadow: 0 0 0 2px var(--albicocca, #F2B98C); }
.spine-card-main { flex: 1; min-width: 0; }
.spine-card .title { margin: 0; font: 800 .9375rem/1.25 var(--sans, sans-serif); }
.spine-card p { margin: 2px 0 0; }
.spine-card .meta.where { color: var(--inchiostro, #231A14); font-weight: 600; }
a.sc-open { font: 800 .75rem/1.2 var(--sans, sans-serif); color: var(--verde, #1E4434); text-decoration: none; min-height: 44px; min-width: 44px; display: grid; place-items: center; padding: 0 6px; }
.spine-card-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, rgb(35 26 20 / .08)); }
.spine-card-moves .icon-btn { width: 44px; min-height: 44px; border-radius: 12px; }
.spine-card-moves .sc-off { margin-left: auto; }
.spine-card > .muted { margin: 8px 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.sc-open { color: var(--link); } }
:root[data-theme="dark"] a.sc-open { color: var(--link); }

/* --- Scheda libro ------------------------------------------------------------------------- */
.book-page { padding-bottom: 12px; }
.book-page .book-hero { display: block; margin: -8px calc(-1 * var(--bleed)) 0; }
.hero-band { position: relative; height: 312px; background: var(--tint, #1D2B45); overflow: hidden; transition: background-color .6s var(--ease, ease); }
.hero-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 30%, rgb(255 255 255 / .08), transparent 70%); pointer-events: none; }
.bk-ring { position: absolute; left: 50%; border-radius: 50%; border: 1px solid rgb(233 199 123 / .16); pointer-events: none; }
.bk-ring.r1 { top: 160px; width: 520px; height: 520px; margin-left: -260px; }
.bk-ring.r2 { top: 214px; width: 380px; height: 380px; margin-left: -190px; }
.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; height: 88px; background: var(--carta, #F5EFE4); border-radius: 40px 40px 0 0; }
.bk-bar { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 3; }
a.bk-btn, button.bk-btn { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 16px; background: rgb(246 239 228 / .14); color: #F6EFE4; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
a.bk-btn:hover, button.bk-btn:hover { background: rgb(246 239 228 / .24); color: #FFFFFF; }
.bk-btn .icon { width: 22px; height: 22px; }
.bk-btn:focus-visible { outline-color: #F6EFE4; }
.hero-cover { position: absolute; left: 50%; top: 66px; width: 156px; height: 234px; margin-left: -78px; z-index: 2; animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.book-hero .hero-cover .cover.large, .book-hero .hero-cover .cover-wrap.large { width: 156px; height: 234px; border-radius: 3px 8px 8px 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 30px 40px -18px rgb(10 15 30 / .75); }
.book-hero .hero-cover .cover-gen.large { outline: 1px solid rgb(233 199 123 / .25); outline-offset: -1px; }
.book-hero .hero-cover .cover-gen .cover-initial { font-size: 3.8rem; }
.hero-text { position: relative; text-align: center; padding: 10px 24px 0; }
.book-hero .hero-text h1 { margin: 0; font-size: 2rem; line-height: 1.05; overflow-wrap: anywhere; text-wrap: balance; }
.book-hero .subtitle { margin: 6px auto 0; color: var(--seppia, #5E5248); font-size: .875rem; }
.book-hero .byline { margin: 6px 0 0; font: 600 .9375rem/1.35 var(--sans, sans-serif); font-style: normal; color: var(--seppia, #5E5248); }
.book-hero .series-line { margin: 4px 0 0; font-size: .8125rem; }
.book-hero .hero-stars { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0; }
.book-hero .hero-stars .stars { --star: 18px; --star-on: #C9973F; gap: 3px; }
.rating-num { font: 800 .8125rem/1 var(--sans, sans-serif); color: var(--inchiostro, #231A14); }
.book-hero .genre-tags { justify-content: center; margin: 12px 0 0; }
.book-hero a.genre-tag { min-height: 36px; padding: 2px 14px; font-size: .75rem; background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); border: 0; border-radius: 12px; }
@media (pointer: coarse) { .book-hero a.genre-tag { min-height: 44px; } }
.book-hero .hero-text > .muted { margin: 8px auto 0; }
/* modifica: testata compatta */
.book-hero.compact .hero-band { height: 178px; }
.book-hero.compact .hero-cover { top: 26px; width: 88px; height: 132px; margin-left: -44px; animation: none; transform: rotate(-2deg); }
.book-hero.compact .hero-cover .cover.large, .book-hero.compact .hero-cover .cover-wrap.large { width: 88px; height: 132px; }
.book-hero.compact .hero-cover .cover-gen .cover-initial { font-size: 2.2rem; }
.book-hero.compact .hero-curve { height: 40px; border-radius: 28px 28px 0 0; }
.book-hero.compact .bk-ring { display: none; }
.book-hero.compact .hero-text h1 { font-size: 1.5rem; }

/* stato del libro: segmenti, colore + icona + testo */
.book-page .status-row { display: block; margin: 20px 0 0; }
.hero-badges { justify-content: center; margin: 10px 0 0; }
.book-page .cards { gap: 14px; margin: 14px 0 0; }
.book-page .cards > * { animation: pg-rise var(--t-enter, .7s) var(--ease, ease) both; }
.book-page .cards > :nth-child(2) { animation-delay: 60ms; } .book-page .cards > :nth-child(3) { animation-delay: 120ms; } .book-page .cards > :nth-child(n+4) { animation-delay: 180ms; }
.book-page .card-sec { border-radius: 22px; }
.book-page .card-head h2 { font-size: 1.15rem; }
.card-edit .ce-txt { font-size: .8125rem; }
@media (max-width: 420px) { .card-edit .ce-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .card-edit { width: 44px; padding: 0; } }

/* «Lo trovi qui» */
.where-card.card-sec { background: var(--verde, #1E4434); color: #F6EFE4; border: 0; padding: 0; overflow: hidden; box-shadow: var(--shadow-verde, 0 24px 40px -22px rgb(30 68 52 / .8)); }
.where-link { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; text-decoration: none; font-weight: 500; min-height: 80px; }
a.where-link:hover { color: #FFFFFF; }
a.where-link:hover .where-go { transform: translateX(3px); }
a.where-link:focus-visible { outline-color: #F6EFE4; outline-offset: -4px; border-radius: 22px; }
.where-ico { width: 48px; height: 48px; border-radius: 16px; background: rgb(242 185 140 / .18); color: var(--albicocca, #F2B98C); display: grid; place-items: center; flex: none; }
.where-ico .icon { width: 24px; height: 24px; }
.where-txt { flex: 1; min-width: 0; }
.where-eyebrow { display: block; font: 800 .75rem/1.2 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--albicocca, #F2B98C); }
.where-card .place-where { display: block; font: 700 .9375rem/1.3 var(--sans, sans-serif); margin-top: 3px; overflow-wrap: anywhere; }
.where-sub { display: block; font-size: .8125rem; color: rgb(246 239 228 / .78); margin-top: 2px; }
.where-sub a { color: #F6EFE4; }
.where-go { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease, ease); stroke-width: 2; }
.where-card .card-edit { background: rgb(246 239 228 / .12); color: #F6EFE4; }
.where-card .card-edit:hover { background: rgb(246 239 228 / .22); }
.where-shelf.shelf-preview { margin: 0 16px 16px; padding: 10px 10px 0; border-radius: 12px; box-shadow: none; background: radial-gradient(90% 80% at 50% 0%, #5A3E2B 0%, #2E2018 75%); }
.where-shelf.shelf-preview .shelf-board { margin: 0 -10px; }
.where-shelf .spine.here { outline: 0; transform: translateY(-4px); animation: found-glow 2.2s ease-in-out infinite; }
button.where-place { margin: 0 16px 16px; width: calc(100% - 32px); background: #F6EFE4; color: var(--verde, #1E4434); }
button.where-place:hover { background: #FFFFFF; color: var(--verde, #1E4434); }
.where-card.unplaced { background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); border: 1px dashed color-mix(in srgb, var(--terracotta, #C25A2E) 45%, transparent); box-shadow: none; }
.where-card.unplaced .where-ico { background: var(--q-peach, #F3DED0); color: var(--q-peach-ink, #A8481F); }
.where-card.unplaced .where-eyebrow, .reading-card .where-eyebrow { color: var(--terracotta-text, #B4532A); }
.where-card.unplaced .where-sub { color: var(--seppia, #5E5248); }
.where-card.unplaced .where-sub a { color: var(--link, #1E4434); }
.where-card.unplaced .card-edit { background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.where-card.unplaced button.where-place { background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); }

/* fatti in due colonne, separati da un filo */
.facts-card.card-sec { padding: 0; overflow: hidden; }
.facts-card .card-head { padding: 12px 12px 10px 16px; }
.facts-card .card-head h2 { margin: 0; }
dl.facts.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: 1px; margin: 0; background: var(--line, rgb(35 26 20 / .08)); border-top: 1px solid var(--line, rgb(35 26 20 / .08)); }
.facts-grid .fact { background: var(--avorio, #FFFDF8); padding: 14px 16px; min-width: 0; }
.facts-grid .fact.wide { grid-column: 1 / -1; }
.facts-grid dt { font: 700 .75rem/1.3 var(--sans, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--seppia, #5E5248); }
.facts-grid dd { margin: 4px 0 0; font: 700 .875rem/1.3 var(--sans, sans-serif); overflow-wrap: anywhere; }
.facts-grid .isbn dd { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.facts-card > p.muted { padding: 0 16px 14px; margin: 0; }

/* nota, come una citazione */
.note-card.card-sec { background: var(--q-peach, #F3DED0); border: 0; box-shadow: none; padding: 14px 18px 16px; position: relative; }
.note-card .card-head { float: right; margin: -8px -12px 6px 10px; }   /* il testo gira attorno a «Modifica», mai sotto */
.note-card .card-edit { background: rgb(255 255 255 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note-card .card-edit { background: rgb(0 0 0 / .28); } }
:root[data-theme="dark"] .note-card .card-edit { background: rgb(0 0 0 / .28); }
.note-fig { margin: 0; }
.note-card blockquote.notes { margin: 4px 0 0; font: italic 400 1.1875rem/1.3 var(--serif, serif); color: color-mix(in srgb, var(--q-peach-ink, #A8481F) 40%, var(--inchiostro, #231A14)); white-space: pre-wrap; quotes: "«" "»"; }
.note-card blockquote.notes::before { content: open-quote; }
.note-card blockquote.notes::after { content: close-quote; }
.note-card figcaption { margin-top: 10px; font: 700 .75rem/1.4 var(--sans, sans-serif); color: var(--q-peach-ink, #A8481F); }
.note-card figcaption.story { font-family: var(--sans, sans-serif); font-size: .75rem; }
.note-card figcaption .linkish { color: var(--q-peach-ink, #A8481F); min-height: 44px; padding: 4px 0; font-size: .75rem; }
.note-empty { margin: 4px 0 0; font-family: var(--serif, serif); font-style: italic; font-size: 1.0625rem; }

/* etichette */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-chip { font: 700 .75rem/1.2 var(--sans, sans-serif); padding: 8px 12px; border-radius: 12px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line-2, rgb(35 26 20 / .1)); }
button.tag-add { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; border: 1px dashed rgb(35 26 20 / .3); background: transparent; color: var(--inchiostro, #231A14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.tag-add { border-color: rgb(243 235 221 / .3); } }
:root[data-theme="dark"] button.tag-add { border-color: rgb(243 235 221 / .3); }
.tag-row:not(:has(.tag-chip)):not(:has(.tag-add)) { display: none; }

/* «Stai leggendo» */
.reading-card .card-head h2 { margin: 0; }
.read-line { margin: 4px 0 8px; font-size: .9375rem; }
.read-pct { color: var(--seppia, #5E5248); font-weight: 700; }
.read-bar { height: 10px; border-radius: 6px; background: var(--pergamena, #EDE4D3); overflow: hidden; }
.read-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--verde, #1E4434), color-mix(in srgb, var(--verde, #1E4434) 70%, var(--albicocca, #F2B98C))); transition: width .6s var(--ease, ease); }
.read-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.read-actions button { flex: 1 1 140px; }

.book-page .danger-zone { margin-top: 18px; }
.book-stamp { margin-top: 8px; }

/* barra delle azioni nella zona del pollice */
.book-actions { position: sticky; bottom: var(--nav-clear, 104px); z-index: 15; display: flex; gap: 10px; margin: 14px calc(-1 * var(--bleed)) 0; padding: 14px var(--bleed) 14px;
  background: color-mix(in srgb, var(--carta, #F5EFE4) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line, rgb(35 26 20 / .08)); }
.book-actions > * { height: 54px; min-height: 54px; border-radius: 18px; font: 800 .9375rem/1 var(--sans, sans-serif); }
.book-actions .ba-lend { flex: 1; background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.book-actions .ba-find { flex: 2; box-shadow: 0 12px 24px -10px rgb(194 90 46 / .8); }
@media (min-width: 1024px) { .book-actions { bottom: 0; margin-inline: 0; padding-inline: 0; border-radius: 0; } }

/* modifica: campi pergamena, raggio 14 */
.book-page.editing .edit-title { font-size: 1.4rem; margin: 18px 0 6px; }
.book-page.editing .form-grid fieldset { background: var(--avorio, #FFFDF8); border-radius: 22px; padding: 16px 16px 4px; margin-bottom: 12px; border: 1px solid var(--line, rgb(35 26 20 / .08)); }
.book-page.editing legend { float: left; width: 100%; font-size: 1.15rem; margin-bottom: 10px; }
.book-page.editing legend + * { clear: both; }
.book-page.editing :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), dialog.modal .form-grid :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: var(--pergamena, #EDE4D3); border-color: transparent; border-radius: 14px; }
.book-page.editing :is(input, select, textarea):hover, dialog.modal .form-grid :is(input, select, textarea):hover { border-color: var(--field-border, #8E7F6D); }
.book-page.editing .savebar { justify-content: stretch; z-index: 15; }
.book-page.editing .savebar button { flex: 1; }
.book-page.editing .savebar button.primary { flex: 2; }

@media (min-width: 900px) {
  .book-page .cards { grid-template-columns: 1fr 1fr; }
  .book-page .cards > .where-card, .book-page .cards > .loan-card, .book-page .cards > .reading-card, .book-page .cards > .tag-row { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .book-page { max-width: 880px; margin-inline: auto; }
  .book-page .book-hero { margin: 0 0 0; border-radius: 28px; overflow: hidden; }
  .book-page .hero-band { border-radius: 28px 28px 0 0; }
}

/* --- Scansiona ----------------------------------------------------------------------------- */
.scan-page { padding-bottom: 8px; }
.scan-stage { position: relative; margin: -8px calc(-1 * var(--bleed)) 0; padding: 16px 16px 58px; color: #F6EFE4; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 40%, #5B4330 0%, #2A1F17 55%, #15110D 100%); }
.scan-stage::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: -30px; height: 150px; background: #3A2A1D; transform: perspective(400px) rotateX(55deg);
  transform-origin: bottom; opacity: .7; pointer-events: none; }
.stage-bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
a.stage-btn, button.stage-btn { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 16px; background: rgb(21 17 13 / .5); color: #F6EFE4; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; flex: none; }
a.stage-btn:hover, button.stage-btn:hover { background: rgb(21 17 13 / .75); color: #FFFFFF; }
.stage-btn .icon { width: 21px; height: 21px; }
.stage-btn:focus-visible, .stage-seg-btn:focus-visible, .stage-cta:focus-visible { outline-color: #F6EFE4; }
button.cam-torch[aria-pressed="true"] { background: var(--albicocca, #F2B98C); color: #2A1810; }
.stage-seg { display: flex; padding: 4px; border-radius: 16px; background: rgb(21 17 13 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-width: 0; }
button.stage-seg-btn { height: auto; min-height: 44px; min-width: 0; flex: 1 1 auto; padding: 4px 14px; border-radius: 12px; background: transparent; color: #F6EFE4; font: 700 .8125rem/1.2 var(--sans, sans-serif); box-shadow: none; white-space: normal; text-align: center; }
button.stage-seg-btn:hover { background: rgb(246 239 228 / .12); color: #FFFFFF; }
button.stage-seg-btn[aria-pressed="true"] { background: #F6EFE4; color: #15110D; }
@media (max-width: 350px) { button.stage-seg-btn { padding: 4px 9px; font-size: .75rem; } }
.stage-frame { position: relative; z-index: 2; width: 240px; height: 300px; margin: 18px auto 0; }
.stage-corner { position: absolute; width: 34px; height: 34px; border: 3px solid #F6EFE4; z-index: 3; pointer-events: none; }
.stage-corner.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.stage-corner.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.stage-corner.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.stage-corner.br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.stage-art { position: absolute; }
.art-cover { left: 44px; top: 30px; width: 152px; height: 232px; padding: 22px 14px 18px 24px; display: flex; flex-direction: column; justify-content: space-between;
  background: #1D2B45; color: #E9C77B; transform: rotate(-3deg); border-radius: 3px 7px 7px 3px; overflow: hidden;
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 14px 24px -12px rgb(0 0 0 / .7); }
.art-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .14) 60%, transparent); }
.art-cover::after { content: ""; position: absolute; inset: 7% 8% 7% 15%; border: 1px solid currentColor; opacity: .3; border-radius: 2px; }
.art-title { font: 400 1.5625rem/1 var(--serif, serif); }
.art-ring { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; align-self: center; }
.art-author { font: 700 .75rem/1 var(--sans, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.art-isbn { left: 30px; top: 92px; width: 180px; height: 116px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #F6EFE4; border-radius: 6px; transform: rotate(-2deg);
  box-shadow: 0 14px 24px -12px rgb(0 0 0 / .7); }
.art-bars { flex: 1; background: repeating-linear-gradient(90deg, #15110D 0 2px, transparent 2px 4px, #15110D 4px 5px, transparent 5px 8px, #15110D 8px 11px, transparent 11px 12px); }
.art-digits { font: 700 .75rem/1 var(--sans, monospace); color: #15110D; letter-spacing: .12em; text-align: center; }
.scan-stage[data-mode="cover"] .art-isbn, .scan-stage[data-mode="isbn"] .art-cover, .scan-stage.live .stage-art { display: none; }
.stage-frame .camera-wrap { position: absolute; inset: 6px; margin: 0; border-radius: 12px; background: #000; box-shadow: none; overflow: hidden; z-index: 1; }
.stage-frame video.camera { width: 100%; height: 100%; object-fit: cover; }
.stage-laser { position: absolute; left: 6%; right: 6%; top: 6%; height: 2px; z-index: 2; border-radius: 2px; background: var(--albicocca, #F2B98C);
  box-shadow: 0 0 18px 4px rgb(242 185 140 / .6); animation: stage-sweep 2.6s ease-in-out infinite; will-change: transform; }
@keyframes stage-sweep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(258px); } }
@media (prefers-reduced-motion: reduce) { .stage-laser { transform: translateY(129px) !important; animation: none !important; } .hero-cover, .found-pin { animation: none !important; } }
.stage-hint { position: relative; z-index: 2; margin: 16px auto 0; text-align: center; font: 600 .8125rem/1.35 var(--sans, sans-serif); color: rgb(246 239 228 / .85); }
.stage-actions { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 12px; text-align: center; }
.scan-stage[data-mode="cover"] .sa-isbn, .scan-stage[data-mode="isbn"] .sa-cover { display: none; }
button.stage-cta { min-height: 52px; padding: 0 22px; border-radius: 18px; background: #F6EFE4; color: #15110D; font: 800 .9375rem/1.2 var(--sans, sans-serif); box-shadow: 0 12px 26px -12px rgb(0 0 0 / .8); }
button.stage-cta:hover { background: #FFFFFF; color: #15110D; }
.stage-actions .rec-hint { margin: 8px 0 0; font-size: .75rem; color: rgb(246 239 228 / .72); }
.scan-sheet { position: relative; z-index: 4; margin: -30px calc(-1 * var(--bleed)) 0; padding: 12px 20px 8px; background: var(--carta, #F5EFE4); border-radius: 30px 30px 0 0;
  animation: pg-up var(--t-enter, .7s) var(--ease, ease) .2s both; scroll-margin-top: 8px; }
@media (min-width: 600px) { .scan-sheet { padding-inline: 28px; } }
.sheet-grip { display: block; width: 44px; height: 5px; border-radius: 4px; background: rgb(35 26 20 / .2); margin: 0 auto 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet-grip { background: rgb(243 235 221 / .22); } }
:root[data-theme="dark"] .sheet-grip { background: rgb(243 235 221 / .22); }
.scan-sheet .scanbar { margin: 0; }
.scan-sheet .scanbar input { font-size: 1.05rem; min-height: 54px; }
.scan-sheet .scanbar button { min-height: 54px; }
.scan-lead { margin: 8px 2px 0; }
.scan-page.scanned .scan-lead { display: none; }
@media (min-width: 1024px) {
  .scan-page { max-width: 720px; margin-inline: auto; }
  .scan-stage { margin: 0; border-radius: 28px; }
  .scan-sheet { margin: -30px 0 0; border-radius: 30px; box-shadow: var(--shadow, none); }
}

/* il risultato: «Trovato!», la scheda migliore con il bordo verde, le altre in elenco */
.scan-sheet #scan-result:not(:empty) { margin-top: 14px; }
.scan-sheet .verdict { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 4px 0 0; --kind-bg: transparent; }
.verdict-eyebrow { margin: 0 0 4px; font: 800 .75rem/1.2 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
.scan-sheet .verdict-top { gap: 10px; margin-bottom: 12px; align-items: baseline; }
.scan-sheet .verdict-disc { width: 34px; height: 34px; border-radius: 12px; align-self: center; }
.scan-sheet .verdict-disc .icon { width: 20px; height: 20px; }
.scan-sheet .verdict-head { font-size: 1.5rem; line-height: 1.1; flex: 1; }
.verdict-count { font: 700 .75rem/1.2 var(--sans, sans-serif); color: var(--seppia, #5E5248); white-space: nowrap; }
.scan-sheet .verdict-book { display: flex; gap: 14px; padding: 14px; border-radius: 22px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line-2, rgb(35 26 20 / .12)); }
.scan-sheet .verdict-book.best, .scan-sheet .verdict.added .verdict-book { border: 2px solid var(--verde, #1E4434); }
.scan-sheet .verdict.owned .verdict-book { border: 2px solid color-mix(in srgb, var(--no-ink, #7E2A1F) 60%, transparent); }
.scan-sheet .verdict.edition .verdict-book, .scan-sheet .verdict.partner .verdict-book { border: 2px solid color-mix(in srgb, var(--kind) 50%, transparent); }
.scan-sheet .verdict-book .cover, .scan-sheet .verdict-book .cover-wrap { width: 64px; height: 96px; flex: none; }
.vb-main { flex: 1; min-width: 0; }
/* titolo e «100%»: se lo spazio è poco, la percentuale va sotto il titolo invece di stringerlo */
.vb-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.scan-sheet .verdict-book .title { flex: 1 1 9rem; margin: 0; font: 800 1rem/1.25 var(--sans, sans-serif); overflow-wrap: break-word; hyphens: auto; }
.match-badge, .rec-badge { flex: none; font: 800 .75rem/1 var(--sans, sans-serif); padding: 5px 8px; border-radius: 8px; background: var(--ok-bg, #DCE7DD); color: var(--ok-ink, #1E4434);
  font-variant-numeric: tabular-nums; border: 0; min-width: 0; }
.vb-author { margin: 2px 0 0; font-size: .8125rem; font-weight: 500; }
.vb-chips, .rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.vb-chip, .rec-chip { font: 700 .75rem/1.2 var(--sans, sans-serif); padding: 4px 8px; border-radius: 8px; background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.vb-src { margin: 6px 0 0; }
.scan-sheet .verdict .main-action { display: flex; gap: 10px; margin: 12px 0 0; flex-wrap: nowrap; }
.scan-sheet .verdict .main-action .add-btn { flex: 2 1 0; width: auto; min-height: 50px; font-size: .875rem; padding-inline: 12px; gap: 6px; border-radius: 14px; white-space: normal; line-height: 1.2; }
.scan-sheet .verdict .main-action .edit-btn { flex: 1 1 0; min-height: 50px; border-radius: 14px; font-size: .875rem; }
.scan-sheet .verdict .actions.minor { margin-top: 8px; gap: 2px 12px; }
.scan-sheet .verdict .actions.minor .ghost { font-size: .8125rem; }
.scan-sheet .verdict .actions.minor .linkish { font-size: .8125rem; }
button.not-this { color: var(--seppia, #5E5248); text-decoration: none; }
button.not-this:hover { color: var(--inchiostro, #231A14); }
.scan-sheet .verdict .actions.after-add { display: flex; gap: 10px; }
.scan-sheet .verdict .actions.after-add .primary { flex: 1 1 auto; }
.scan-sheet ul.mini { margin-top: 10px; }
.added-line { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--ok-bg, #DCE7DD); color: var(--ok-ink, #1F4F38) !important; font-weight: 700; }

/* «Se lo prendi, va qui»: la posizione, verde bosco come «Lo trovi qui» */
.scan-sheet .verdict .place, dialog.modal .place { background: var(--verde, #1E4434); color: #F6EFE4; border: 0; border-radius: 22px; padding: 16px; margin: 14px 0 4px; }
.scan-sheet .verdict .place .place-head, dialog.modal .place .place-head { color: var(--albicocca, #F2B98C); }
.scan-sheet .verdict .place .place-where, dialog.modal .place .place-where { font: 700 1rem/1.3 var(--sans, sans-serif); margin-top: 4px; }
.scan-sheet .verdict .place .place-between, dialog.modal .place .place-between { color: rgb(246 239 228 / .82); font-size: .875rem; }
.scan-sheet .verdict .place b, dialog.modal .place b { color: #FFFFFF; }
.scan-sheet .verdict .place .shelf-preview, dialog.modal .place .shelf-preview { border-radius: 12px; margin: 12px 0 0; box-shadow: none; }
.scan-sheet .verdict .place .shelf-preview[data-style="classico"], dialog.modal .place .shelf-preview[data-style="classico"] { background: radial-gradient(90% 80% at 50% 0%, #5A3E2B 0%, #2E2018 75%); }
.scan-sheet .verdict .place .notice, dialog.modal .place .notice { color: var(--inchiostro, #231A14); border-radius: 12px; margin-bottom: 0; }

/* righe alternative (ricerca per titolo, desideri) */
ul.alt-list li { padding: 0; border-bottom: 1px solid var(--line, rgb(35 26 20 / .08)); }
ul.alt-list li:last-child { border-bottom: 0; }
button.alt-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; min-height: 52px; background: transparent; color: var(--inchiostro, #231A14);
  text-align: left; justify-content: flex-start; font: 500 .8125rem/1.3 var(--sans, sans-serif); border-radius: 10px; box-shadow: none; }
button.alt-row:hover { background: color-mix(in srgb, var(--pergamena, #EDE4D3) 60%, transparent); }
.alt-row .cover.tiny, .alt-row .cover-wrap.tiny, .alt-row .tiny { width: 26px; height: 38px; flex: none; }
.alt-row .cover-initial { font-size: .7rem; }
.alt-t { flex: 1; min-width: 0; }
.alt-row > .icon { width: 18px; height: 18px; color: var(--seppia, #5E5248); }

/* --- Desideri ------------------------------------------------------------------------------ */
.wish-page .wish-add { margin-top: 16px; flex-wrap: nowrap; }
.wish-page .wish-add .search { flex: 1 1 0; min-width: 0; }
.wish-page .wish-add .search > input { width: 100%; flex: none; }
.wish-page .wish-add > button { flex: none; min-height: 52px; border-radius: 16px; padding-inline: 16px; }
.wish-page ul.wish .book.wish-row { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; padding: 12px; border-radius: 18px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .06)); }
.wish-page ul.wish .book.wish-row > .cover, .wish-page ul.wish .book.wish-row > .cover-wrap { width: 42px; height: 62px; }
.wish-page ul.wish .title { font: 800 .9375rem/1.25 var(--sans, sans-serif); }
.wish-page ul.wish .row-actions { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.wish-page ul.wish .row-actions button { min-height: 44px; }
/* telefono stretto o testo grande: i pulsanti scendono sotto il testo, che usa tutta la larghezza */
@media (max-width: 480px) {
  .wish-page ul.wish .book.wish-row { grid-template-columns: 42px minmax(0, 1fr); }
  .wish-page ul.wish .row-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}
.wish-row.to-buy { box-shadow: inset 4px 0 0 var(--terracotta, #C25A2E); }
.badge.buy { background: var(--q-peach, #F3DED0); color: var(--q-peach-ink, #A8481F); }
.badge.bell { background: var(--q-sky, #DDE3EA); color: var(--q-sky-ink, #2C4A6B); }
a.wish-link { font-size: .75rem; align-self: center; }
.share-card { margin-top: 20px; }
.share-card .card-head h2 { margin: 0 0 4px; }
.share-form button { min-height: 48px; }
ul.share-list li { gap: 6px 10px; }
.share-who { font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.wish-edit .title { font-size: 1.2rem; margin: 0 0 12px; }
fieldset.buy-set { background: var(--carta, #F5EFE4); border-radius: 18px; padding: 12px 14px 4px; margin-top: 6px; }
fieldset.buy-set legend { float: left; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 4px; }
fieldset.buy-set legend + * { clear: both; }
.buy-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 380px) { .buy-fields .two { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .wish-page ul.wish .row-actions .ra-txt { display: none; } .wish-page ul.wish .row-actions button { width: 44px; padding: 0; } }
.stage-photo { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 12px; display: none; z-index: 1;
  box-shadow: 0 14px 24px -12px rgb(0 0 0 / .7); }
.scan-stage.has-photo .stage-photo { display: block; }
.scan-stage.has-photo .stage-art, .scan-stage.live .stage-photo { display: none; }
.scan-sheet .rec-res-head .rec-thumb { display: none; }
.scan-or { margin: 18px 2px 8px; font: 800 .75rem/1.2 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--seppia, #5E5248); }
.scan-sheet:not(.has-result) .scan-or { display: none; }

/* --- Amministrazione: consumo delle fonti dati ------------------------------------------------ */
.usage-card { border: 1px solid var(--line); border-radius: 22px; background: var(--avorio); padding: 16px 16px 18px; margin: 8px 0 18px; }
.usage-card h2 { margin-top: 0; }
.usage-list { display: grid; gap: 0; margin: 10px 0 14px; padding: 0; list-style: none; }
.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name spark" "meter meter"; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.usage-row:first-child { border-top: 0; }
.usage-row.off :is(.usage-bar, .usage-spark) { opacity: .5; }   /* fonte spenta: si attenuano i grafici, il testo resta leggibile */
.usage-row.off .usage-name b { color: var(--seppia); }
.usage-name { grid-area: name; min-width: 0; display: grid; gap: 2px; }
.usage-name b { font-size: .875rem; }
.usage-name small { font-size: .75rem; color: var(--seppia); }
.usage-name .status { font-size: .75rem; padding: 2px 8px; }
.usage-meter { grid-area: meter; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.usage-num { font-variant-numeric: tabular-nums; font-size: .8125rem; white-space: nowrap; }
.usage-num small { color: var(--seppia); font-size: .75rem; }
.usage-bar { display: block; height: 8px; border-radius: 99px; background: var(--pergamena, #EDE4D3); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; min-width: 0; border-radius: 99px; background: var(--ok-ink); }
.usage-bar.order > span { background: var(--order-ink); }
.usage-bar.no > span { background: var(--no-ink); }
.usage-spark { grid-area: spark; display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 70px; }
.usage-spark-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--seppia) 45%, transparent); }
.usage-spark-bar.today { background: var(--inchiostro); }
.usage-stats { margin-top: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.usage-stats div { padding: 10px 12px; border-radius: 16px; }
.usage-stats dt { font-size: .75rem; line-height: 1.3; }
.usage-stats dd { font-size: 1.5rem; }
.usage-est { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--pergamena, #EDE4D3); }
.usage-est label { font-weight: 700; font-size: .875rem; }
.usage-est-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usage-est-in input { width: 9em; min-height: 44px; }
.usage-est-text { margin: 4px 0 0; font-size: .9375rem; line-height: 1.45; }
.usage-est-text small { display: block; margin-top: 4px; font-size: .75rem; color: var(--seppia); }
.usage-days { font-family: var(--serif); font-size: 1.25em; }
.quota-table input { width: 7.5em; min-height: 40px; }
.quota-table th[scope="row"] { font-weight: 600; text-align: left; }
@media (min-width: 720px) {
  .usage-row { grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) auto; grid-template-areas: "name meter spark"; align-items: center; }
}

/* ==========================================================================================
   Scaffale bloccato + «Riordina», scheda breve, posti alternativi, «Dov'è» (v3)
   ========================================================================================== */
/* barra degli strumenti: ricerca, Dorsi/Copertine, Riordina */
button.reorder-toggle { flex: none; min-height: 46px; padding: 0 14px; gap: 6px; border-radius: 14px; background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14);
  font: 800 .8125rem/1.2 var(--sans, sans-serif); box-shadow: none; }
button.reorder-toggle .icon { width: 18px; height: 18px; }
button.reorder-toggle[aria-pressed="true"] { background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); }
@media (max-width: 520px) { button.reorder-toggle { width: 46px; padding: 0; } button.reorder-toggle .rt-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.case-head .rio-txt { white-space: nowrap; }
@media (max-width: 420px) { .case-head .rio-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* modalità riordino: barra fissa nella zona del pollice, mobili tratteggiati */
.reorder-bar { position: sticky; bottom: var(--nav-clear, 104px); z-index: 14; display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 8px 8px 14px;
  border-radius: 18px; background: var(--inchiostro, #231A14); color: var(--carta, #F5EFE4); box-shadow: 0 16px 30px -16px rgb(35 26 20 / .7); animation: pg-rise .35s var(--ease, ease) both; }
.reorder-bar > .icon { width: 20px; height: 20px; flex: none; color: var(--albicocca, #F2B98C); }
.reorder-bar p { flex: 1; max-width: none; margin: 0; font: 600 .8125rem/1.3 var(--sans, sans-serif); min-width: 0; }
.reorder-bar button { flex: none; min-height: 44px; }
@media (min-width: 1024px) { .reorder-bar { bottom: 16px; } }
.shelf-page.reordering .bookcase .case-frame { outline: 2px dashed color-mix(in srgb, var(--albicocca, #F2B98C) 80%, transparent); outline-offset: 3px; }
.shelf-page.reordering .bookcase .spine { cursor: grab; }
.shelf-page:not(.reordering) .bookcase .spine { cursor: pointer; }

/* la scheda breve */
.shelf-sheet .sheet-title { font-size: 1.35rem; }
.ss-path { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--verde, #1E4434); color: #F6EFE4;
  font: 700 .9062rem/1.35 var(--sans, sans-serif); overflow-wrap: anywhere; }
.ss-ico { width: 28px; height: 28px; border-radius: 9px; background: rgb(242 185 140 / .2); color: var(--albicocca, #F2B98C); display: grid; place-items: center; flex: none; }
.ss-ico .icon { width: 17px; height: 17px; }
.ss-path > span:last-child { padding-top: 4px; }
.ss-space { margin: 6px 2px 0; font-size: .8125rem; color: var(--seppia, #5E5248); font-weight: 600; }
.ss-loan { margin-top: 12px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--q-peach, #F3DED0) 60%, var(--avorio, #FFFDF8)); }
.ss-loan.late { background: color-mix(in srgb, var(--no-bg, #F4DFDA) 75%, var(--avorio, #FFFDF8)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--no-ink, #7E2A1F) 25%, transparent); }
.ss-loan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ss-loan-actions > * { flex: 1 1 auto; }
.ss-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
dialog.sheet .ss-main > * { min-height: 54px; border-radius: 16px; padding-inline: 10px; gap: 8px; justify-content: center; text-align: center; font-size: .9375rem; white-space: nowrap; }
/* scheda breve aperta: spazio sotto lo scaffale, così il ripiano può salire sopra il foglio */
@media (max-width: 1023px) { .shelf-page.sheet-open { padding-bottom: 62vh; } }
.ss-minor { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.ss-minor .linkish { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; color: var(--inchiostro, #231A14); }
.ss-minor .linkish .icon { width: 18px; height: 18px; }
.ss-minor .ss-off { color: var(--no-ink, #7E2A1F); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-path { background: #1A3A2C; } }
:root[data-theme="dark"] .ss-path { background: #1A3A2C; }

/* spazio stimato e «Mettilo altrove» (nel blocco verde del posto) */
.place .place-space { margin: 8px 0 0; font: 700 .8125rem/1.35 var(--sans, sans-serif); opacity: .9; }
.place-alt { margin-top: 10px; }
button.place-alt-btn { min-height: 44px; padding: 6px 14px; gap: 8px; border-radius: 14px; background: rgb(246 239 228 / .14); color: inherit; font: 800 .8125rem/1.2 var(--sans, sans-serif); box-shadow: none; }
button.place-alt-btn:hover { background: rgb(246 239 228 / .24); color: inherit; }
button.place-alt-btn .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; font-size: .75rem; }
button.place-alt-btn[aria-expanded="true"] { background: #F6EFE4; color: var(--verde, #1E4434); }
ul.alt-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
ul.alt-list[hidden] { display: none; }
button.alt-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; border-radius: 14px; text-align: left; justify-content: flex-start;
  background: #F6EFE4; color: #231A14; box-shadow: none; font-weight: 600; }
button.alt-opt:hover { background: #FFFFFF; color: #231A14; }
.alt-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--verde, #1E4434); color: #F6EFE4; }
.alt-ico .icon { width: 17px; height: 17px; }
.alt-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.alt-path { font: 800 .875rem/1.25 var(--sans, sans-serif); color: #231A14; overflow-wrap: anywhere; }
.alt-meta { font: 600 .7812rem/1.3 var(--sans, sans-serif); color: #5E5248; }
.alt-go { width: 18px; height: 18px; flex: none; color: #5E5248; }
/* il blocco del posto fuori dal verde (anteprime chiare): stessi elementi, colori della carta */
.place:not(dialog .place):not(.scan-sheet .place) button.place-alt-btn { background: var(--pergamena, #EDE4D3); }

/* --- Scheda libro: «Dov'è» in cima, condivisione detta per esteso ------------------------------ */
.book-page > .where-card { margin: 14px 0 0; animation: pg-rise var(--t-enter, .7s) var(--ease, ease) both; }
.where-card.boxed { background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); border: 1px solid var(--line-2, rgb(35 26 20 / .14)); box-shadow: none; }
.where-card.boxed .where-ico { background: var(--q-wheat, #F1E4C4); color: var(--q-wheat-ink, #7A5612); }
.where-card.boxed .where-eyebrow { color: var(--q-wheat-ink, #7A5612); }
.where-card.boxed .where-sub { color: var(--seppia, #5E5248); }
.where-card.boxed .card-edit { background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.where-card.boxed button.where-place { background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
.badge.pending { background: var(--order-bg); color: var(--order-ink); white-space: normal; }
.hero-badges .badge { white-space: normal; text-align: left; }
.share-card .share-line { margin: 0 0 8px; }

/* --- densità: un po' più d'aria tolta (≈ 10–15 %) su elenco, scaffali e scheda --------------------- */
ul.books.lib-rows { gap: 6px; margin-top: 10px; }
.lib-rows .book { gap: 12px; padding: 10px 12px; border-radius: 16px; }
.lib-rows .badges { margin-top: 4px; gap: 4px; }
.lib-rows .badge { padding: 3px 8px; font-size: .75rem; }
.g-chips { margin-top: 4px; }
.lib-page .search { margin-top: 12px; }
.shelf-page .bookcase { margin: 14px 0 6px; }
.shelf-hint { margin: 10px 0 4px; }
.book-page .status-row { margin: 14px 0 0; }
.book-page .cards { gap: 12px; margin: 12px 0 0; }
.hero-band { height: 290px; }
.hero-cover { top: 56px; }
.book-hero .hero-text h1 { font-size: 1.875rem; }
/* barra in basso: «Gestisci prestito» e «Trova in libreria» su una riga anche a 360–390 px */
.book-actions > * { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-width: 0; }
.book-actions .ba-lend { flex: 1 1 auto; }
.book-actions .ba-find { flex: 1.4 1 auto; }
@media (max-width: 430px) {
  .book-actions { gap: 8px; }
  .book-actions > * { padding-inline: 12px; gap: 6px; font-size: .875rem; }
  .book-actions .ba-lend.lent .icon { display: none; }
}
/* righe della testata centrate anche sul computer (i <p> hanno una larghezza massima di lettura) */
.book-hero .hero-text > p { margin-inline: auto; }

/* --- «Blocco app» (audit ISO 27001 2026-10, M3) ------------------------------------------------------------ */
.lock-offer { order: 2; display: flex; gap: 14px; align-items: flex-start; background: var(--avorio); border: 1px solid var(--line);
  border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.lock-offer .lo-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--q-sage); color: var(--q-sage-ink); }
.lock-offer .lo-ico .icon { width: 22px; height: 22px; }
.lock-offer .lo-txt { min-width: 0; flex: 1; }
.lock-offer h2 { margin: 2px 0 4px; font-size: 1.05rem; }
.lock-offer p { margin: 0 0 10px; overflow-wrap: anywhere; }
.lock-offer .row { display: flex; flex-wrap: wrap; gap: 8px; }
.lock-offer .row > * { min-height: 44px; }
.lock-card h1 { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; }
.lock-card h1 .icon { width: 26px; height: 26px; flex: none; }
.lock-pin { font-size: 1.6rem; letter-spacing: .35em; text-align: center; min-height: 56px; width: 100%; }
.lock-card button.big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lock-forgot { margin-top: 14px; text-align: center; }
.lock-forgot .linkish { min-height: 44px; }
.lock-box .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.lock-box .row > button { min-height: 44px; }
.lock-box select { max-width: 220px; }
.lock-state { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.lock-state .icon { width: 18px; height: 18px; color: var(--verde-ink); }

/* --- «Il mio giudizio», generi ed etichette, trama, note, citazioni: sezioni apribili con la riga di riepilogo ------- */
.my-take { display: grid; gap: 12px; margin: 14px 0 0; }
.my-take > * { animation: pg-rise var(--t-enter, .7s) var(--ease, ease) both; }
.my-take > :nth-child(2) { animation-delay: 50ms; } .my-take > :nth-child(n+3) { animation-delay: 100ms; }
.sk-sec.card-sec { padding: 0; overflow: hidden; }
.sk-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px 12px 20px; cursor: pointer; list-style: none; border-radius: 22px; }
.sk-head::-webkit-details-marker { display: none; }
.sk-head:focus-visible { outline: 3px solid var(--focus-ring, #F2B98C); outline-offset: -3px; }
.sk-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.sk-title h2 { margin: 0; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 8px; }
.sk-sum { min-width: 0; font: 700 .8125rem/1.35 var(--sans, sans-serif); color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
.sk-sum:empty { display: none; }
details[open]:not(.sk-giudizio) > .sk-head .sk-sum { display: none; }   /* aperta: il contenuto si vede già */
.sk-chev { flex: none; width: 22px; height: 22px; color: var(--seppia, #5E5248); transition: transform .25s var(--ease, ease); }
details[open] > .sk-head .sk-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sk-chev { transition: none; } .my-take > * { animation: none; } }
.sk-body { padding: 0 20px 18px; display: grid; gap: 12px; min-width: 0; }
.sk-body > * { min-width: 0; }
.sk-body > button { justify-self: start; }
.sk-giudizio.card-sec { border: 1.5px solid color-mix(in srgb, var(--terracotta, #C25A2E) 28%, transparent); }
.sk-giudizio .sk-sum { color: var(--terracotta-text, #A4491F); }
.take-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.take-label { font-weight: 700; font-size: .9375rem; flex: 0 0 auto; min-width: 7.5rem; }
.take-rate .rating-row { flex: 1 1 15rem; }
.take-rec .rec-row { margin: 0; flex: 1; }
.take-rec .rec-row.compact { border-top: 0; padding-top: 0; }
.read-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.read-chip { display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; }
.read-chip .icon { width: 16px; height: 16px; }
.read-chip:disabled { opacity: 1; cursor: default; }
.take-read small { flex-basis: 100%; }
.take-thought { border-top: 1px solid var(--line, rgb(35 26 20 / .08)); padding-top: 12px; display: grid; gap: 8px; }
.take-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.take-sub h3 { margin: 0; font: 800 .9375rem/1.3 var(--sans, sans-serif); }
.take-sub small { flex: 1 1 14rem; }
.private-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--q-sage, #DCE7DD); color: var(--q-sage-ink, #1E4434); font: 800 .75rem/1.6 var(--sans, sans-serif); }
.private-pill .icon { width: 13px; height: 13px; }
.thought-private { display: flex; align-items: center; gap: 8px; margin: 0; }
.thought-private .icon { flex: none; width: 18px; height: 18px; }
.inline-text { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.inline-text > * { max-width: 100%; }
.inline-text textarea { width: 100%; min-height: 7.5rem; resize: vertical; font: 400 1rem/1.5 var(--sans, sans-serif); }
.inline-text blockquote { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
blockquote.thought-text { font: italic 400 1.125rem/1.45 var(--serif, serif); padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--terracotta, #C25A2E) 55%, transparent); }
.my-take blockquote.notes { font: 400 1rem/1.5 var(--sans, sans-serif); padding: 10px 14px; border-radius: 14px; background: var(--q-wheat, #F1E4C4); color: var(--inchiostro, #231A14); width: 100%; box-sizing: border-box; }
.it-empty { margin: 0; font-family: var(--serif, serif); font-style: italic; font-size: 1.0625rem; color: var(--seppia, #5E5248); }
.it-bar { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.it-btns { display: flex; gap: 8px; margin-left: auto; }
.thought-date { margin: -2px 0 0; }
.my-take .genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.my-take a.genre-tag, .genre-chip.linked a.genre-tag { color: inherit; text-decoration: none; font-weight: 700; }
.my-take .genre-tags a.genre-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--pergamena, #EDE4D3); }
.genre-chip.linked a.genre-tag { background: none; border: 0; padding: 0 2px; min-height: 44px; font-size: .9375rem; border-radius: 0; }
.genre-chip.linked a.genre-tag:hover { text-decoration: underline; }
.my-take .genre-add { flex-wrap: wrap; }
.my-take .genre-add input { flex: 1 1 9rem; }
.my-take .genre-add { max-width: 30rem; }
.my-take .story { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--q-peach-ink, #A8481F); font-weight: 700; }
.my-take .story .icon { flex: none; width: 16px; height: 16px; }
.trama-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.trama-text.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.trama-more { justify-self: start; }
.my-take .quotes-card .qt-add { justify-self: start; }
@media (min-width: 760px) {
  .my-take { grid-template-columns: 1fr 1fr; align-items: start; grid-auto-flow: row dense; }   /* generi e note affiancati */
  .my-take > .sk-giudizio, .my-take > .sk-trama, .my-take > .sk-citazioni { grid-column: 1 / -1; }
}