/* Connection record: a paper sleeve printed with signal rings, and the login form. */

.broker-sleeve { background: #ddd0c3; }
.broker-art {
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(160deg, #e2d5c8, #b9a596);
}
/* signal rings spreading from the top right corner */
.broker-art i {
  position: absolute; right: -14%; top: -14%;
  border-radius: 50%; border: 1.5px solid rgba(58, 36, 32, .5);
}
.broker-art i:nth-child(1) { width: 26%; height: 26%; right: -2%; top: -2%; background: #b5482f; border: 0; }
.broker-art i:nth-child(2) { width: 54%; height: 54%; right: -16%; top: -16%; }
.broker-art i:nth-child(3) { width: 84%; height: 84%; right: -31%; top: -31%; border-color: rgba(58, 36, 32, .32); }
.broker-art i:nth-child(4) { width: 116%; height: 116%; right: -47%; top: -47%; border-color: rgba(58, 36, 32, .18); }
.broker-sleeve .sleeve-name { color: var(--label-ink); text-shadow: none; }
.broker-sleeve .sleeve-meta { color: rgba(58, 36, 32, .8); }

.broker-player form { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.broker-player label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 14px; }
.broker-player input {
  font: 400 16px var(--font-body);           /* 16px stops iOS from zooming in */
  padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink);
}
.broker-player input:focus { outline: none; border-bottom-color: var(--label); }
.broker-player input::placeholder { color: var(--ink-faint); }
.broker-player .pill { margin-top: 10px; }