/* the sign-in page, the client's page and the People page reuse the board'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 }
.okline.warm { color: var(--warn) }
.piece p.pill { align-self: flex-start; margin: 0; font-size: 16px }
/* the three ways to send a bake back: big, outlined, one per row on a phone */
.tastes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@media (max-width: 600px) { .tastes { grid-template-columns: minmax(0, 1fr) } }
.btn.taste { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; min-height: 64px; white-space: normal }
.btn.taste b { font-size: 18px } .btn.taste small { font-size: 15px; color: var(--ink-2); font-weight: 500 }
/* what's in the oven and the menu: one plain row each */
.plain.oven { gap: 8px }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 16px; font-size: 18px }
.menu-row .two { min-width: 0; overflow-wrap: anywhere }
.menu-row b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2) } .menu-row.done b { color: var(--good) }

/* client page with a brand color: the top band carries it */
.brand-on .topband { background: var(--brand); color: var(--brand-fg); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none }
.brand-on .topband .btn.text { color: var(--brand-fg) }
.brand-on .mark i { opacity: 1 }
.mark i.haslogo { background-color: var(--logo-bg); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; width: 28px; height: 28px; border-radius: 8px }