/* InvoiceScan — same phone family as ReceiveScan / TapBooks */

@import url("../receive-scan/receive-scan.css");

.phone-screen {
  min-height: 32rem;
  height: 32rem;
  display: flex;
  flex-direction: column;
}

.phone-screen .cta-post {
  margin-top: auto;
  margin-bottom: 0;
}

.cam-box {
  margin-bottom: 0.65rem;
}

.cam-view {
  position: relative;
  height: 9.25rem;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.cam-view .corner {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--sr-accent);
}

.invoice-sheet {
  width: 72%;
  max-width: 10.5rem;
  background: #f8f8f8;
  border-radius: 3px;
  padding: 0.55rem 0.5rem 0.65rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
}

.invoice-sheet .inv-brand {
  font-size: 0.55rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-sheet .inv-line {
  height: 0.18rem;
  background: #d0d0d0;
  border-radius: 1px;
  margin-bottom: 0.22rem;
}

.invoice-sheet .inv-line.short { width: 55%; }
.invoice-sheet .inv-line.mid { width: 78%; }
.invoice-sheet .inv-line.amt {
  width: 40%;
  height: 0.28rem;
  background: #a8a8a8;
  margin-top: 0.35rem;
}

.cam-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.capture-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 4px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
}

.capture-status strong {
  display: block;
  color: var(--sr-ok);
  font-size: 0.82rem;
}

.capture-status span {
  color: var(--sr-muted);
  font-size: 0.72rem;
}

.fields-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.fields-head h2 {
  margin: 0;
  font-size: 0.85rem;
}

.fields-head span {
  font-size: 0.72rem;
  color: var(--sr-muted);
}

.field-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sr-border);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.field-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  border-bottom: 1px solid #e8e8e8;
}

.field-list li:last-child { border-bottom: 0; }

.field-list li span {
  color: var(--sr-muted);
}

.field-list li strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.field-list li.fresh {
  background: var(--sr-accent-soft);
  border-left: 3px solid var(--sr-accent);
}