/* Purchase-photo is intentionally scoped so it can be inserted above the distributor form. */
#purchase-photo { display: grid; gap: 14px; }
#purchase-photo .purchase-photo-head,
#purchase-photo .purchase-photo-controls,
#purchase-photo .purchase-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#purchase-photo .purchase-photo-head { justify-content: space-between; border-bottom: 1px solid var(--line, #d7e2ec); padding-bottom: 10px; }
#purchase-photo .purchase-photo-head h2 { margin: 0; color: var(--ink, #09246b); }
#purchase-photo .purchase-photo-note { margin: 4px 0 0; color: var(--muted, #647b94); font-size: 13px; }
#purchase-photo .purchase-photo-file { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line, #cbd8e5); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #16324f); font-weight: 650; cursor: pointer; }
#purchase-photo .purchase-photo-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#purchase-photo [data-photo-status] { flex: 1 1 260px; min-width: 180px; color: var(--muted, #647b94); font-size: 13px; }
#purchase-photo [data-photo-status][data-kind="error"] { color: #a52626; }
#purchase-photo [data-photo-status][data-kind="ok"] { color: #087044; }
#purchase-photo [data-photo-status][data-kind="busy"] { color: #7a5200; }
#purchase-photo .purchase-photo-preview-wrap { display: flex; align-items: flex-start; gap: 12px; min-height: 34px; color: var(--muted, #647b94); font-size: 12px; }
#purchase-photo [data-photo-preview] { display: block; width: min(100%, 520px); max-height: 280px; object-fit: contain; object-position: left top; border: 1px solid var(--line, #d7e2ec); border-radius: 8px; background: #f5f8fb; }
#purchase-photo .purchase-photo-editor { display: grid; gap: 8px; }
#purchase-photo .purchase-photo-editor > label { font-weight: 650; }
#purchase-photo [data-photo-raw] { width: 100%; min-height: 130px; resize: vertical; box-sizing: border-box; padding: 10px; border: 1px solid var(--line, #cbd8e5); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #16324f); font: 13px/1.5 var(--f-mono, ui-monospace, monospace); }
#purchase-photo .purchase-photo-warnings { margin: 0; padding-left: 20px; color: #8b4d00; font-size: 13px; }
#purchase-photo .purchase-photo-empty { margin: 0; color: var(--muted, #647b94); }
#purchase-photo [data-photo-rows] { display: grid; gap: 10px; }
#purchase-photo .purchase-photo-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(190px, 1.7fr) minmax(92px, .7fr) minmax(92px, .7fr); gap: 8px; align-items: start; padding: 11px; border: 1px solid var(--line, #d7e2ec); border-radius: 8px; background: var(--surface, #fff); }
#purchase-photo .purchase-photo-row label { display: grid; gap: 4px; color: var(--muted, #647b94); font-size: 12px; font-weight: 650; }
#purchase-photo .purchase-photo-row input,
#purchase-photo .purchase-photo-row select { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--line, #cbd8e5); border-radius: 7px; background: var(--surface, #fff); color: var(--ink, #16324f); font: 13px var(--f-body, system-ui, sans-serif); }
#purchase-photo .purchase-photo-row code { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--ink, #16324f); font: 12px/1.45 var(--f-mono, ui-monospace, monospace); }
#purchase-photo .purchase-photo-source { min-width: 0; color: var(--muted, #647b94); font-size: 12px; }
#purchase-photo .purchase-photo-source > span { font-weight: 700; }
#purchase-photo .purchase-photo-review { display: flex; align-items: flex-start; gap: 8px; color: var(--ink, #16324f); font-size: 13px; font-weight: 650; }
#purchase-photo .purchase-photo-review input { flex: 0 0 auto; margin-top: 2px; }
#purchase-photo [data-photo-transfer-note] { color: var(--muted, #647b94); font-size: 12px; }
#purchase-photo button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 700px) {
  #purchase-photo .purchase-photo-row { grid-template-columns: 1fr 1fr; }
  #purchase-photo .purchase-photo-source,
  #purchase-photo .purchase-photo-row label:nth-of-type(1) { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  #purchase-photo .purchase-photo-row { grid-template-columns: 1fr; }
  #purchase-photo .purchase-photo-source,
  #purchase-photo .purchase-photo-row label:nth-of-type(1) { grid-column: auto; }
  #purchase-photo .purchase-photo-file,
  #purchase-photo .purchase-photo-controls .btn { flex: 1 1 100%; justify-content: center; }
}