/* Scan box (D-150): drop / photo / file → read for free → the entry opens prefilled. Tokens from app.css only. */
.scan-box { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-2); margin-bottom: var(--s-4); }
.scan-box__form { margin: 0; }
.scan-box__drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md);
  border: 1.5px dashed var(--c-border); background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.scan-box.is-over .scan-box__drop { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
.scan-box__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-hairline); }
.scan-box__icon .icon { width: 26px; height: 26px; }
.scan-box__text { flex: 1 1 240px; min-width: 0; }
.scan-box__eyebrow { color: var(--c-gold); }
.scan-box__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.005em; color: var(--c-text); }
.scan-box__hint { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.scan-box__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scan-box__actions .btn { min-height: var(--tap); }
.scan-box__actions label.btn { cursor: pointer; }
.scan-box__actions label.btn:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Phones get "Take photo" first; on a desktop the camera button is the file picker anyway, so it steps aside. */
.scan-box__camera { display: none; }
@media (pointer: coarse) {
  .scan-box__camera { display: inline-flex; }
  .scan-box__choose { background: var(--c-surface) !important; color: var(--c-text) !important; box-shadow: inset 0 0 0 1px var(--c-border) !important; }
}
.scan-box.is-js [data-scan-nojs] { display: none; }
.scan-box__status { padding: var(--s-4) var(--s-5) var(--s-2); }
.scan-box__status-row { display: flex; align-items: center; gap: var(--s-3); }
.scan-box__status-row strong { font-weight: 650; }
.scan-box__bar { margin-top: var(--s-3); }
.scan-box__bar > span { width: 0; }
.scan-box__detail { margin: var(--s-2) 0 0; min-height: 1.2em; font-size: var(--fs-sm); color: var(--c-text-2); }
.scan-box.is-done .scan-box__status strong { color: var(--c-ok); }
.scan-box.is-done [data-scan-spinner] { border-color: var(--c-ok); animation: none; }
.scan-box.is-busy .scan-box__drop { opacity: .55; pointer-events: none; }
.scan-box__error { margin: var(--s-3) var(--s-5) var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-danger-soft); color: var(--c-danger); font-size: var(--fs-sm); }
.scan-box__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); color: var(--c-text-3); }
.scan-box__free { display: inline-flex; align-items: center; gap: 6px; }
.scan-box__free .icon { color: var(--c-ok); }
.scan-box__ai { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-gold-soft);
  color: var(--c-text); font-weight: 600; cursor: pointer; }
.scan-box__ai input { margin: 0; accent-color: var(--c-gold); }
.scan-box__ai .icon { color: var(--c-gold); }
/* Compact: one calm row above a form or a list */
.scan-box--compact { padding: var(--s-1); }
.scan-box--compact .scan-box__drop { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
.scan-box--compact .scan-box__icon { width: 40px; height: 40px; border-radius: 12px; }
.scan-box--compact .scan-box__icon .icon { width: 20px; height: 20px; }
.scan-box--compact .scan-box__title { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; }
.scan-box--compact .scan-box__hint { font-size: var(--fs-xs); }
.scan-box--compact .scan-box__foot { padding-top: var(--s-1); }
@media (max-width: 640px) {
  .scan-box__drop { padding: var(--s-4); }
  .scan-box__actions { width: 100%; }
  .scan-box__actions .btn { flex: 1 1 140px; justify-content: center; }
  .scan-box--compact .scan-box__text { flex-basis: calc(100% - 56px); }
}
@media (prefers-reduced-motion: reduce) { .scan-box__drop, .scan-box__bar > span { transition: none; } }
/* Review panel: how it was read */
.ai-panel__found { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.ai-panel__found strong { color: var(--c-text); }
.badge--free { background: var(--c-ok-soft); color: var(--c-ok); }
.scan-box.is-busy .scan-box__drop { opacity: .55; pointer-events: none; }
.scan-kinds { margin-top: var(--s-4); }
.scan-kinds__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.scan-kinds__list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.scan-kinds__list strong { display: block; font-weight: 600; font-size: var(--fs-sm); }
.scan-kinds__list small { color: var(--c-text-2); font-size: var(--fs-xs); line-height: 1.4; }
.scan-kinds__ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }