/* the sign-in page, the client's page and the People page reuse the tracker's look */
.solo { max-width: 560px; margin: 0 auto; padding-block: 32px 64px; display: flex; flex-direction: column; gap: 18px }
.solo.widepage { max-width: 760px }
.solo h1 { margin: 0 }
.solo .lede { margin: 0 }
.codebox { font-size: 30px; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center }
.piece { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 18px; box-shadow: var(--shadow) }
.piece h3 { margin: 0; font-size: 22px; overflow-wrap: anywhere }
.piece .shot { display: block; width: 100%; padding: 0; border: 0; background: var(--fill); border-radius: 12px; overflow: hidden; cursor: pointer }
.piece .shot img { display: block; width: 100%; max-height: 420px; object-fit: contain }
.piece textarea { width: 100%; min-height: 110px; font: inherit; font-size: 19px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--field); background: var(--card); color: var(--ink); resize: vertical }
.piece textarea:focus { outline: 3px solid var(--tint); outline-offset: 1px; border-color: var(--tint) }
.piece .row .btn { flex: 1 1 180px }
.quote { margin: 0; font-size: 18px; color: var(--ink-2); overflow-wrap: anywhere }
.sec { margin: 14px 0 0; font-size: 24px }
.okline { color: var(--good); font-weight: 600; font-size: 18px; margin: 0 }
.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px }