/* Librarium · dischi, film, copie di pregio, promemoria dei prestiti, gestione dei generi.
   Solo gettoni di "Biblioteca Mia" (app.css): niente colori nuovi in chiaro e in scuro, se non la tinta oro del pregio. */

:root { --gem: #694F0C; --gem-bg: #F3E7C2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gem: #E9C77B; --gem-bg: rgb(233 199 123 / .16); } }
:root[data-theme="dark"] { --gem: #E9C77B; --gem-bg: rgb(233 199 123 / .16); }

/* --- tipo: gettoni Libri · Musica · Film · Tutti ------------------------------------------- */
.type-slot:empty { display: none; }
.type-chips { padding-top: 4px; }
.type-chip { display: inline-flex; align-items: center; gap: 6px; }
.type-chip .icon { width: 16px; height: 16px; }
.type-chip .n { font-weight: 800; opacity: .75; font-variant-numeric: tabular-nums; }
.media-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 8px 1px 6px; border-radius: 8px;
  background: var(--pergamena); color: var(--seppia); font: 800 .75rem/1.5 var(--sans); vertical-align: 1px; white-space: nowrap; }
.media-tag .icon { width: 13px; height: 13px; }
.home-others { margin: 6px 4px 0; font: 700 var(--step--1)/1.35 var(--sans); color: var(--seppia); }
.home-others a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sr-types { padding: 0; margin-left: auto; }
.sr-types .chip { min-height: 44px; padding: 4px 12px; }

/* copertine generate per dischi e film: custodia più quadrata, icona del tipo */
.cover-gen.cover-media::after { inset: 8%; border-radius: 3px; }
.cover-mico { position: absolute; right: 7%; bottom: 7%; width: 30%; height: 30%; min-width: 12px; min-height: 12px; opacity: .55; stroke-width: 1.6; }
.cover-gen.m-cd, .cover-gen.m-vinile { border-radius: 4px; }
.cover-gen.m-vinile .cover-rule, .cover-gen.m-cd .cover-rule { display: none; }

/* --- copie di pregio -------------------------------------------------------------------- */
.badge.gem, .gem-mini { background: var(--gem-bg); color: var(--gem); }
.badge.gem .icon, .gem-mini .icon { color: var(--gem); }
.gem-mini { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 7px; font: 800 .72rem/1.5 var(--sans); }
.gem-mini .icon { width: 12px; height: 12px; }
.gem-note { color: var(--gem); font-weight: 700; }
.gem-note .icon { width: 14px; height: 14px; vertical-align: -2px; }
.copy-gem { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--r-ctl);
  background: var(--gem-bg); color: var(--inchiostro); overflow-wrap: anywhere; }
.copy-gem .icon { color: var(--gem); flex: none; margin-top: 2px; }
.copy-gem b { color: var(--gem); white-space: nowrap; }
.valuable-row b .icon { color: var(--gem); width: 18px; height: 18px; vertical-align: -3px; }
.add-valuable { width: 100%; min-width: 0; max-width: 100%; justify-content: center; white-space: normal; line-height: 1.25; hyphens: manual; text-align: center; }
.add-valuable > span { flex: 0 1 auto; overflow-wrap: break-word; word-break: normal; }
.actions.same-ed { flex-wrap: wrap; min-width: 0; }
.actions.same-ed > button { flex: 1 1 100%; justify-content: center; }
.add-valuable .icon { color: var(--gem); }
.chip .icon { width: 16px; height: 16px; vertical-align: -3px; }

/* --- scaffale: dorsi di dischi e film, segno del pregio ------------------------------------- */
.spine.media { border-radius: 2px; }
/* custodia di un CD: plastica trasparente sopra il dorso stampato, cerniera chiara */
.spine.media-cd { background: linear-gradient(90deg, rgb(255 255 255 / .38), rgb(255 255 255 / .08) 22%, transparent 60%, rgb(0 0 0 / .18)), var(--sp);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 1px 1px rgb(0 0 0 / .3); }
/* DVD e Blu-ray: custodia di plastica, Blu-ray con la fascia blu in alto */
.spine.media-dvd, .spine.media-bluray { background: linear-gradient(90deg, rgb(0 0 0 / .25), rgb(255 255 255 / .1) 30%, rgb(0 0 0 / .2)), var(--sp); border-radius: 3px; }
.spine.media-bluray { background: linear-gradient(180deg, #1C5FA8 0 10px, transparent 10px), linear-gradient(90deg, rgb(0 0 0 / .25), rgb(255 255 255 / .1) 30%, rgb(0 0 0 / .2)), var(--sp); }
/* videocassetta: plastica nera con l'etichetta del titolo */
.spine.media-vhs { --sp-ink: #231A14; background: linear-gradient(90deg, #1b1714 0 12%, transparent 12% 88%, #1b1714 88%), linear-gradient(180deg, #1b1714 0 8px, #F3E9D8 8px calc(100% - 8px), #1b1714 calc(100% - 8px)); color: #231A14; }
.spine.media-vhs .spine-ico { color: #F3E9D8; bottom: 1px; }
/* vinile: copertina di cartone, sottile e alta */
.spine.media-vinile { background: linear-gradient(90deg, rgb(0 0 0 / .3), rgb(255 255 255 / .06) 40%, rgb(0 0 0 / .25)), var(--sp); border-radius: 1px; }
.spine-ico { position: absolute; left: 50%; bottom: 1px; width: 13px; height: 13px; margin-left: -6.5px; display: grid; place-items: center; opacity: .8; }
.spine-ico .icon { width: 11px; height: 11px; stroke-width: 2; }
.spine.media .spine-a { margin-top: 6px; }
/* pregio: un filo d'oro in cima al dorso, discreto */
.spine-gem { position: absolute; top: 2px; left: 50%; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); border-radius: 1px;
  background: #E9C77B; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }

/* --- modulo: anno o epoca, foto della copertina, tipo -------------------------------------- */
.year-era-row { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 8px; }
.year-era-row input[hidden] { display: none; }
.add-photo-field { display: grid; gap: 8px; justify-items: start; }
.add-photo-btn { cursor: pointer; }
.add-photo-prev { width: 96px; height: auto; max-height: 140px; object-fit: cover; border-radius: var(--r-cover); box-shadow: var(--shadow-cover); }
.add-photo-st { max-width: 100%; }
.cover-fix { margin: 0 0 16px; }
.cover-fix .row { display: flex; flex-wrap: wrap; gap: 8px; }
.add-type { padding-top: 0; }
.add-type .chip { display: inline-flex; align-items: center; gap: 6px; }
.manual-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; }
.manual-row small { flex: 1 1 14em; }
.ask-type { width: 100%; }
.ask-type .chips { padding-top: 4px; }
.related-line { margin: 6px 0 0; font: 700 var(--step--1)/1.35 var(--sans); }
.related-line a { display: inline-flex; align-items: center; gap: 6px; }
.related-note a { font-weight: 700; }

/* --- foglio «Ricorda di restituirlo» ------------------------------------------------------- */
.rm-form { display: grid; gap: 12px; }
.rm-form .field { margin: 0; }
.rm-templates { padding: 0; }
.rm-templates .chip { white-space: normal; text-align: left; line-height: 1.2; }
.rm-templates .chip[aria-checked="true"] { background: var(--verde); color: var(--verde-ink); }
.rm-text { width: 100%; min-height: 9.5em; resize: vertical; font: 500 var(--step-0)/1.45 var(--sans); }
.rm-under { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 4px; }
.rm-send-h { margin: 4px 0 -4px; font: 800 var(--step--1)/1.3 var(--sans); color: var(--seppia); }
.rm-send-h:empty { display: none; }
.rm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 8px; }
.rm-actions .button, .rm-actions button { min-height: 48px; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
.rm-last { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--pergamena); color: var(--seppia);
  font: 700 var(--step--1)/1.35 var(--sans); flex-wrap: wrap; }
.rm-last[hidden] { display: none; }
.rm-last.recent { background: var(--order-bg); color: var(--order-ink); }
.rm-last small { flex-basis: 100%; font-weight: 600; }
.rm-none { margin: 0; }
.rm-none p { margin: 0 0 8px; }
.rm-privacy { margin: 0; }
.loan-last { display: inline-flex; align-items: center; gap: 6px; font: 700 .78rem/1.3 var(--sans); color: var(--seppia); }
.loan-last .icon { width: 14px; height: 14px; }
.loan-last.recent { color: var(--order-ink); }
.loan-card .loan-last { margin: 4px 0 0; }
.loan-all { margin-top: 18px; }
.loan-all-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.loan-all .loan-group h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font: 800 var(--step-0)/1.3 var(--sans); }
.loan-all .loan-group h3 .count { margin-left: auto; }
.loan-all .loan-group.overdue h3 { color: var(--no-ink); }
.rm-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rm-act2 { min-height: 44px; }

/* --- foglio prestito: contatti separati ----------------------------------------------------- */
.ln-contacts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ln-contacts legend { font: 800 var(--step--1)/1.3 var(--sans); color: var(--seppia); padding: 0; margin-bottom: 4px; }
.ln-contacts .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); gap: 8px; }
.ln-contacts .field { margin: 0; min-width: 0; }
.ln-wa-same { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.ln-wa[hidden] { display: none; }
.ln-pick { justify-self: start; }

/* --- Profilo: messaggi e generi ------------------------------------------------------------- */
.msg-editor { display: grid; gap: 18px; }
.msg-block { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.msg-h { margin: 0; font: 800 var(--step-0)/1.3 var(--sans); }
.msg-ta { width: 100%; min-height: 8em; resize: vertical; font: 500 var(--step-0)/1.45 var(--sans); }
.msg-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 4px; }
.msg-reset[hidden] { display: none; }
.msg-ph { padding: 0; gap: 6px; }
.msg-ph .chip { min-height: 44px; padding: 4px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; white-space: nowrap; }
.msg-prev-box { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--pergamena); min-width: 0; }
.msg-prev-box .eyebrow { margin: 0 0 6px; }
.msg-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 var(--step-0)/1.45 var(--sans); }
.gm-list { display: grid; gap: 4px; margin: 8px 0 12px; }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gm-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.gm-name input { width: 22px; height: 22px; flex: none; }
.gm-var { flex-basis: 100%; padding-left: 30px; }

/* --- statistiche per tipo ------------------------------------------------------------------- */
.types-card .donut-wrap { margin-top: 4px; }

/* campi nascosti secondo il tipo (es. le pagine per un DVD): fuori davvero dalla griglia del modulo */
.form-grid [hidden], .edit-form [hidden], .add-dialog [hidden] { display: none !important; }
.valuable-row > span, .todo-row > span { display: grid; gap: 2px; min-width: 0; }
.valuable-row small, .todo-row small { display: block; font-weight: 500; color: var(--seppia); }
.type-chips { gap: 6px; }
.type-chips .chip { padding: 6px 12px; }
.add-type-h { margin: 14px 2px 2px; font: 800 .75rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--seppia); }

/* la legenda dei gruppi del modulo è «float»: il primo campo visibile (gli altri possono essere nascosti dal tipo) va sotto */
.form-grid fieldset > .field, .form-grid fieldset > .check { clear: both; }
/* barra di salvataggio del modulo: sopra il pulsante Scansiona rialzato della barra in basso (anche con il testo molto grande) */
@media (max-width: 1023px) { .book-page.editing .savebar { bottom: calc(var(--nav-clear) + 18px); } }
/* «Hai già questa edizione»: un'altra copia e «Aggiungila comunque: è di pregio» uno sotto l'altro, larghi */
.scan-sheet .verdict .main-action.same-ed { flex-wrap: wrap; }
.scan-sheet .verdict .main-action.same-ed > button { flex: 1 1 100%; width: 100%; }
.scan-sheet .verdict .main-action .ask-type { flex: 1 1 100%; }