/* Phone to phone, laid out as a conversation.
   A transfer is a thing that happened between two people, in order, with a
   direction — which is exactly what a message list is for. A stack of cards
   made it look like configuration. */

body { padding: 0; }

.pad { max-width: 540px; margin: 0 auto; padding: 24px 18px 40px; }

button {
  font: 600 15px ui-sans-serif, system-ui, sans-serif;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  border-radius: 12px; padding: 14px 18px; cursor: pointer;
}
button.wide {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-bottom: 10px;
  background: var(--accent); border-color: transparent; color: var(--bg);
}
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: .45; cursor: default; }
.i { width: 20px; height: 20px; flex: none; }

.u {
  display: block; margin-top: 14px;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--track); color: var(--muted);
  padding: 11px 13px; border-radius: 10px; word-break: break-all;
}

.card.bad { border-color: var(--bad); }
#err {
  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--bad); margin: 0;
}

/* ---- The pairing code ----------------------------------------------------- */

/* Its own white card, always, in both themes. A code is read by contrast, and
   this is one of the few places where following the theme is the worse answer. */
.qrbox {
  background: #fff; border-radius: 18px;
  padding: 14px; margin: 4px auto 14px;
  max-width: 300px;
  font-size: 13px; color: #555; text-align: center;
}
.qr { display: block; width: 100%; height: auto; }

.hint.mid { text-align: center; margin-bottom: 22px; }

/* ---- The invitation screen ----------------------------------------------- */

.field-row { margin-bottom: 22px; }
.field-row[hidden] { display: none; }

.lbl {
  display: block; margin-bottom: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted);
}

/* Full width. It used to sit in a flex row beside a shuffle button, where
   flex:1 filled the space; with the button gone that rule does nothing and the
   box shrank to whatever the browser felt like. */
.txt {
  width: 100%; box-sizing: border-box;
  font: 600 16px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--track);
  border: 1px solid transparent; border-radius: 12px;
  padding: 13px 15px;
}
.txt:focus { outline: 0; border-color: var(--accent); }

/* One row of choices where only one can be true. Three short words beat a
   dropdown that hides two of them behind a tap. */
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 11px 6px; font-size: 13px; font-weight: 600;
  background: var(--track); border-color: transparent; color: var(--muted);
  border-radius: 11px;
}
.seg button.on { background: var(--accent); color: var(--bg); }

.hint { margin: 9px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* The record of what happened. Folded away, because it is for the times it is
   needed and those should be rare. */
.trail { margin-top: 16px; }
.trail summary {
  cursor: pointer; padding: 8px 0;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.trail pre {
  margin: 6px 0 10px; max-height: 40vh; overflow: auto;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--muted);
  background: var(--track); padding: 10px 12px; border-radius: 10px;
}
.trail button { width: 100%; }

/* Present for Copy and for anyone who wants to select it, out of the way of
   everyone else. A raw address on a screen is something to squint at. */
.u.away {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* A moment that is usually a blink and sometimes is not. Quiet rather than
   busy: a spinner for something that takes 200ms is its own kind of noise. */
.mid-screen {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
}
.waiting-line {
  margin: 0; font-size: 15px; color: var(--muted);
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .waiting-line { animation: none; } }

/* ---- The first screen ---------------------------------------------------- */

/* The footer sits at the bottom of the screen rather than wherever the content
   above it happens to stop. On a screen with this little on it, a row of links
   floating in the upper third reads as a page that failed to finish loading. */
#start {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 72px);
}
#start .foot { margin-top: auto; padding-top: 34px; }

/* The hint under a field, when what is in the field is the problem. */
.hint.wrong { color: var(--bad); }