/* Read from photo (app/js/ai-scan.js, docs/AI-SCAN.md): the button beside a cheque or receipt photo, its "Reading the photo" line, and the "check this"
   mark on every field the photo filled. Logical properties only, so Arabic mirrors by itself; a 44 pt button; the spinner stands still under Reduce Motion. */
.ais{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:8px }
.ais[hidden]{ display:none }
.ais-btn{ display:inline-flex; align-items:center; gap:8px; min-height:calc(44px * var(--dt,1)); padding:0 16px; border-radius:100px; font-weight:600; font-size:calc(15px * var(--dt,1)) }
.ais-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
.ais-btn:focus-visible{ outline:2px solid var(--nile, #1a7f5a); outline-offset:2px }
.ais-status{ color:var(--muted); font-size:calc(13px * var(--dt,1)); min-width:0 }
.ais-status:empty{ display:none }
.ais-spin{ display:inline-block; width:14px; height:14px; flex:none; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; vertical-align:-2px;
  margin-inline-end:6px; animation:btnspin .7s linear infinite }
@media (prefers-reduced-motion:reduce){ .ais-spin{ animation:none; border-top-color:currentColor; opacity:.6 } }

/* a field the photo filled: a brass edge on its leading side and a short note under it, until the person changes it themselves */
.field.ais-check{ border-inline-start:3px solid var(--brass, #B08A4A); padding-inline-start:10px; margin-inline-start:-13px }
.field.ais-check input, .field.ais-check select, .field.ais-check textarea{ border-color:var(--brass, #B08A4A); background-color:color-mix(in srgb, var(--brass, #B08A4A) 9%, var(--card, #fff)) }
.ais-note{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:calc(12.5px * var(--dt,1)); color:var(--ink) }
.ais-note::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brass, #B08A4A); flex:none }
.ais-note.low::before{ background:var(--clay, #A33B2B) }