/* "Fotografa il libro": avanzamento, scelta tra i candidati. Usa i colori di app.css. */
.rec-file-btn { min-height: 48px; }
/* le due vie (fotocamera dal vivo, foto) si dividono la riga; sul telefono una sotto l'altra, larghe uguali */

.rec-panel { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); position: relative; }
.rec-panel::before { /* il nastro da pacco, come per le posizioni */
  content: ""; position: absolute; top: -9px; left: 22px; width: 64px; height: 18px; background: var(--tape); opacity: .85;
  transform: rotate(-3deg); border-radius: 1px; box-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.rec-thumb { width: 64px; height: 88px; object-fit: cover; border-radius: 3px; flex: none; background: var(--surface-2);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 4px 10px -4px rgb(0 0 0 / .3); }
.rec-body { flex: 1; min-width: 0; }
.rec-title { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); margin: 0 0 6px; }
ol.rec-steps { list-style: none; margin: 0; padding: 0; }
.rec-step { display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--ink-2); }
.rec-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--field-border); display: grid; place-items: center; flex: none; }
.rec-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.rec-step[data-state="active"] { color: var(--ink); font-weight: 600; }
.rec-step[data-state="active"] .rec-mark { border-color: var(--cloth) transparent var(--cloth) var(--cloth); animation: rec-spin .9s linear infinite; }
.rec-step[data-state="done"] { color: var(--ink); }
.rec-step[data-state="done"] .rec-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.rec-step[data-state="fail"] .rec-mark { border-color: var(--line); color: var(--ink-2); }
.rec-step[data-state="fail"] .rec-label, .rec-step[data-state="skip"] .rec-label { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 50%, transparent); }
.rec-step[data-state="skip"] .rec-mark { border-style: dashed; color: var(--ink-2); }
@keyframes rec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rec-step[data-state="active"] .rec-mark { animation: none; border-style: dotted; } }

.rec-again { margin-top: -6px; }
.rec-none p { margin: 6px 0; }

/* «Trovato!»: la corrispondenza migliore in evidenza (bordo verde, %), poi le alternative in elenco */
.rec-panel { border-radius: 22px; background: var(--avorio, #FFFDF8); }
.rec-panel::before { background: var(--albicocca, #F2B98C); }
.rec-results { margin: 4px 0 8px; }
.rec-res-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.rec-res-t { flex: 1; min-width: 0; }
.rec-res-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rec-thumb.small { width: 40px; height: 56px; border-radius: 3px 6px 6px 3px; }
.rec-res-title { font-family: var(--serif, serif); font-size: 1.5rem; font-weight: 400; margin: 0; line-height: 1.1; }
.rec-res-title:focus { outline: none; }
.rec-res-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rec-count { font: 700 .75rem/1.2 var(--sans, sans-serif); color: var(--seppia, #5E5248); white-space: nowrap; }
.rec-sub { margin: 4px 0 0; }
ul.rec-cards { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
ul.rec-cards > li.rec-card { display: block; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
ul.rec-cards > li.rec-card.best { margin-bottom: 14px; animation: rec-in .5s var(--ease, ease) both; }
@keyframes rec-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.rec-card.best .rec-card-top { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 22px; background: var(--avorio, #FFFDF8); border: 2px solid var(--verde, #1E4434); }
.rec-card.best[data-level="mid"] .rec-card-top { border-color: color-mix(in srgb, var(--order-ink, #7A4410) 60%, transparent); }
.rec-card.best[data-level="low"] .rec-card-top { border-color: color-mix(in srgb, var(--no-ink, #7E2A1F) 55%, transparent); }
.rec-card .cover, .rec-card .cover-wrap { width: 64px; height: 96px; flex: none; }
.rec-card-main { flex: 1; min-width: 0; }
.rec-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.rec-card-main .title { flex: 1 1 9rem; font: 800 1rem/1.25 var(--sans, sans-serif); margin: 0; overflow-wrap: break-word; hyphens: auto; }
.rec-author { margin: 2px 0 0; color: var(--seppia, #5E5248); font-size: .8125rem; }
.rec-isbn { margin: 6px 0 0; font-size: .75rem; color: var(--seppia, #5E5248); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* la percentuale: verde (90+) quasi certo, ambra (60-89) probabile, rosa dubbio — sempre con il numero */
.rec-card[data-level="high"] .rec-badge { background: var(--ok-bg, #DCE7DD); color: var(--ok-ink, #1E4434); }
.rec-card[data-level="mid"] .rec-badge { background: var(--order-bg, #F6E6CF); color: var(--order-ink, #7A4410); }
.rec-card[data-level="low"] .rec-badge { background: var(--no-bg, #F4DFDA); color: var(--no-ink, #7E2A1F); }
.rec-card.alt .rec-badge { background: transparent; padding: 0; color: var(--seppia, #5E5248); font-size: .75rem; }
.rec-card-actions { display: flex; gap: 10px; margin-top: 12px; }
.rec-card-actions button { min-height: 48px; border-radius: 14px; font-size: .875rem; }
button.rec-ok { flex: 2 1 0; background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); box-shadow: 0 10px 20px -12px rgb(30 68 52 / .9); }
button.rec-ok:hover { background: var(--verde-2, #123024); color: var(--verde-ink, #F6EFE4); }
button.rec-edit { flex: 1 1 0; }
button.rec-no { display: flex; margin: 4px auto 0; min-height: 44px; background: none; color: var(--seppia, #5E5248); font-weight: 700; box-shadow: none; padding: 6px 12px; }
button.rec-no:hover { background: none; color: var(--no-ink, #7E2A1F); text-decoration: underline; }
.rec-card.alt { border-top: 1px solid var(--line, rgb(35 26 20 / .08)); }
button.rec-alt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 58px; border: 0; background: transparent; color: var(--inchiostro, #231A14);
  text-align: left; justify-content: flex-start; font: 500 .8125rem/1.3 var(--sans, sans-serif); border-radius: 0; box-shadow: none; }
button.rec-alt:hover { background: color-mix(in srgb, var(--pergamena, #EDE4D3) 50%, transparent); }
.rec-alt-cover { width: 26px; height: 38px; flex: none; border-radius: 2px 5px 5px 2px; }
.rec-alt-cover::after { inset: 10% 12% 10% 18%; }
.rec-alt-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rec-alt-t b { font-weight: 800; }
.rec-src { display: inline-block; margin-top: 6px; font: 700 .75rem/1.2 var(--sans, sans-serif); padding: 3px 8px; background: var(--albicocca, #F2B98C); color: var(--albicocca-ink, #3B2219);
  border-radius: 8px; }
.rec-again { margin: 10px 0 0; gap: 8px 14px; }
.rec-none-actions { margin-top: 10px; }