/* send files (site/send/) — the P2P sharer. Shared tokens stay in style.css. */
.send { gap: 14px; }
.send-msg { margin: 0; font-weight: 600; }
.send-msg.err { color: #C0362C; }

/* the files: name, size or state, and a bar */
.send-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.send-files:empty { display: none; }
.send-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 6px; align-items: center;
  padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.send-files li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-files li .send-state { font-variant-numeric: tabular-nums; }
.send-files li progress { grid-column: 1 / -1; appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--soft); overflow: hidden; }
.send-files li progress::-webkit-progress-bar { background: var(--soft); border-radius: 999px; }
.send-files li progress::-webkit-progress-value { background: var(--yellow); border-radius: 999px; }
.send-files li progress::-moz-progress-bar { background: var(--yellow); border-radius: 999px; }
.send-files li.done progress::-webkit-progress-value { background: var(--local); }
.send-files li.done progress::-moz-progress-bar { background: var(--local); }
.send-files .send-save { grid-row: 1; grid-column: 3; padding: 6px 12px; }
.send-x { grid-row: 1; grid-column: 3; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.send-x:hover { background: var(--line); }

/* the link: QR code beside the address */
.send-link { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.send-link:empty { display: none; }
.send-qr { width: 168px; height: 168px; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.send-link-text { display: grid; gap: 10px; }
.send-link-text input { width: 100%; font-family: var(--mono); font-size: 13px; }
@media (max-width: 560px) {
  .send-link { grid-template-columns: 1fr; justify-items: center; }
  .send-link-text { width: 100%; }
}