/* ============================================================================
   FoundFlow AI — Recoverable-cash scan visual styles
   Themes: light (white card) · panel (on white surfaces) · dark (ink).
   The recoverable total is the single brass moment in its viewport.
   ========================================================================== */

.ff-scan{width:100%;container-type:inline-size}
.ff-scan__panel{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:26px 28px 24px;
}
.ff-scan--light .ff-scan__panel,
.ff-scan--panel .ff-scan__panel{
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.ff-scan--dark .ff-scan__panel{
  background:linear-gradient(180deg,#15241F 0%, #101D19 100%);
  border:1px solid rgba(143,207,182,.16);box-shadow:0 30px 80px rgba(0,0,0,.4);
}

/* scan sweep line */
.ff-scan__sweep{
  position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg, rgba(21,73,59,0) 0%, rgba(21,73,59,.07) 70%, rgba(21,73,59,.16) 100%);
  border-bottom:1px solid rgba(21,73,59,.35);
}
.ff-scan--dark .ff-scan__sweep{
  background:linear-gradient(180deg, rgba(143,207,182,0) 0%, rgba(143,207,182,.06) 70%, rgba(143,207,182,.14) 100%);
  border-bottom:1px solid rgba(143,207,182,.45);
}
.ff-scan.run .ff-scan__sweep{animation:ffSweep 1.5s var(--ease) forwards}
@keyframes ffSweep{
  0%{opacity:0;transform:translateY(-110%)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(240%)}
}

/* head */
.ff-scan__head{
  display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.ff-scan--dark .ff-scan__head{border-color:rgba(143,207,182,.14)}
.ff-scan__dot{width:9px;height:9px;border-radius:50%;background:var(--pine);position:relative;flex:0 0 auto}
.ff-scan--dark .ff-scan__dot{background:var(--mint)}
.ff-scan.run .ff-scan__dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--pine);
  animation:ffPulse 1.8s ease-out infinite}
.ff-scan--dark.run .ff-scan__dot::after{border-color:var(--mint)}
@keyframes ffPulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.ff-scan__h-title{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ff-scan--dark .ff-scan__h-title{color:var(--ivory)}
.ff-scan__h-tag{
  margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pine);background:rgba(21,73,59,.08);border-radius:999px;padding:4px 11px;
}
.ff-scan--dark .ff-scan__h-tag{color:var(--mint);background:rgba(143,207,182,.12)}

/* rows */
.ff-scan__rows{list-style:none;margin:0;padding:0}
.ff-scan__row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(8px);
}
.ff-scan--dark .ff-scan__row{border-color:rgba(255,255,255,.07)}
.ff-scan.run .ff-scan__row{animation:ffRowIn .5s var(--ease) forwards}
.ff-scan.run .ff-scan__row:nth-child(1){animation-delay:.45s}
.ff-scan.run .ff-scan__row:nth-child(2){animation-delay:.62s}
.ff-scan.run .ff-scan__row:nth-child(3){animation-delay:.79s}
.ff-scan.run .ff-scan__row:nth-child(4){animation-delay:.96s}
.ff-scan.run .ff-scan__row:nth-child(5){animation-delay:1.13s}
.ff-scan.done .ff-scan__row{opacity:1;transform:none}
@keyframes ffRowIn{to{opacity:1;transform:none}}

.ff-scan__type{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.ff-scan__row--invoice .ff-scan__type{color:var(--pine);background:rgba(21,73,59,.09)}
.ff-scan__row--quote .ff-scan__type{color:var(--stone);background:rgba(87,96,91,.10)}
.ff-scan--dark .ff-scan__row--invoice .ff-scan__type{color:var(--mint);background:rgba(143,207,182,.14)}
.ff-scan--dark .ff-scan__row--quote .ff-scan__type{color:#b8c2bc;background:rgba(255,255,255,.07)}

.ff-scan__body{display:flex;flex-direction:column;min-width:0}
.ff-scan__label{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.ff-scan--dark .ff-scan__label{color:var(--ivory)}
.ff-scan__meta{font-size:12.5px;color:var(--stone)}
.ff-scan--dark .ff-scan__meta{color:#9aa9a2}

.ff-scan__pill{
  font-size:11px;font-weight:600;color:var(--stone);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;display:flex;align-items:center;gap:6px;
}
.ff-scan__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pine)}
.ff-scan--dark .ff-scan__pill::before{background:var(--mint)}
.ff-scan--dark .ff-scan__pill{color:#9aa9a2;border-color:rgba(255,255,255,.14)}

.ff-scan__amt{font-family:var(--display);font-size:18px;font-weight:500;color:var(--ink);white-space:nowrap;text-align:right}
.ff-scan--dark .ff-scan__amt{color:var(--ivory)}

/* foot / total — the single brass moment */
.ff-scan__foot{padding-top:18px;margin-top:4px}
.ff-scan__foot-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ff-scan__total-label{font-size:14px;font-weight:600;color:var(--stone)}
.ff-scan__total-label em{font-style:normal;font-weight:500;color:var(--stone);opacity:.8}
.ff-scan--dark .ff-scan__total-label{color:#aeb8b2}
.ff-scan__total{
  font-family:var(--display);font-size:clamp(30px,4vw,40px);font-weight:600;
  color:var(--brass);letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;
}
.ff-scan__note{
  display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--stone);line-height:1.5;
}
.ff-scan--dark .ff-scan__note{border-color:rgba(255,255,255,.07);color:#9aa9a2}
.ff-scan__note svg{flex:0 0 14px;margin-top:3px;color:var(--pine)}
.ff-scan--dark .ff-scan__note svg{color:var(--mint)}

/* Reshape based on the PANEL's own width (not the viewport): when the scan
   is squeezed into a narrow column, drop the pill to its own row so the
   label never collides with it. */
@container (max-width:440px){
  .ff-scan__row{grid-template-columns:auto 1fr auto;grid-template-areas:"type body amt" "pill pill pill";row-gap:8px}
  .ff-scan__type{grid-area:type}
  .ff-scan__body{grid-area:body}
  .ff-scan__amt{grid-area:amt}
  .ff-scan__pill{grid-area:pill;justify-self:start}
}
/* Viewport fallback for browsers without container queries. */
@media(max-width:560px){
  .ff-scan__row{grid-template-columns:auto 1fr auto;grid-template-areas:"type body amt" "pill pill pill";row-gap:8px}
  .ff-scan__type{grid-area:type}
  .ff-scan__body{grid-area:body}
  .ff-scan__amt{grid-area:amt}
  .ff-scan__pill{grid-area:pill;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .ff-scan__row{opacity:1 !important;transform:none !important;animation:none !important}
  .ff-scan__sweep{display:none}
  .ff-scan__dot::after{display:none !important}
}