/* Port lane W4 (docs/SPEC-port-2026-09-23.md). This lane owns this file alone;
   app.css stays untouched while the port runs. Tokens only from app.css/themes.css. */

/* ---------------------------------------------------------------------------
   F8 — "Put it on a bill". The picker over a loose (invoice_id NULL),
   COMPLETED payment (money-screen.js's `attachOverlay` and friends). A
   full-screen overlay, not an inline row expansion — this moves real money
   and must never read as one more expanding card in the list behind it.
   --------------------------------------------------------------------------- */

.attach-overlay {
  position: fixed;
  inset: 0;
  z-index: 200; /* above the shell header/bell (see shell-header.js) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  background: var(--scrim);
}

.attach-sheet {
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
  overflow: hidden;
}

.attach-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.attach-sheet-head h2 {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--w-semi);
  color: var(--ink);
}

.attach-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* "$340.00 · card · Sep 21 · Name" — what's being placed, and where it came
   from. Never invents a customer name; see attachHeaderLine's own doc. */
.attach-header-line {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
}

.attach-search {
  width: 100%;
  box-sizing: border-box;
  height: var(--tap-comfortable);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--text-body);
}

.attach-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A plain fact band (a refusal, a load/search failure) — never the same
   visual weight as the confirm band below, which is the one that writes. */
.attach-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--ink);
}

.attach-band p {
  margin: 0;
}

.attach-refusal {
  background: var(--bad-soft, var(--tone-late-bg));
  color: var(--bad, var(--tone-late-ink));
}

/* THE step that writes. Its own band, its own two buttons — "Put it here" /
   "Put it here anyway" never share a screen with the browse list, so a tap
   can never land on the wrong one. */
.attach-confirm {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.attach-best {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--money);
  border-radius: var(--radius-lg);
  background: var(--card-2);
}

.attach-best-label {
  font-size: var(--text-micro);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--money);
}

.attach-showpaid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  height: var(--tap-min);
  padding: 0 var(--space-2);
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--w-medium);
  cursor: pointer;
}

.attach-paidbills {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attach-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.attach-result-mark {
  font-size: var(--text-money-lg);
  color: var(--money);
}

.attach-result h3 {
  margin: 0;
  font-size: var(--text-heading);
  color: var(--ink);
}

.attach-result p {
  margin: 0;
  color: var(--ink);
}

.attach-result .ts-btn {
  width: 100%;
  max-width: 320px;
}