/* The set-up page (setup.html, setup-invalid.html), and the password pages that share its look (forgot, reset, account-password). The look is the sign-in page's: login.css supplies the fonts, the card, the fields
   and the dark panel. This file adds what only the set-up page has: two fields side by side, the field messages and the show-password
   checkbox. Status is a shape plus words: a field message is the console's red square and a sentence, never colour alone. */

.setup-names { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 440px) { .setup-names { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* The message under a field. */
.field-error { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; margin: 6px 0 0; font: 500 14px/20px var(--bgroup-font-sans); color: var(--bgroup-status-blocked); }
.field-error-shape { display: block; flex: none; margin-top: 2px; fill: var(--bgroup-status-blocked); }

.setup-form .bgroup-hint, .login-form .bgroup-hint { margin: 6px 0 0; }
.setup-form .bgroup-input[readonly] { background: var(--bgroup-surface); color: var(--bgroup-slate); cursor: default; }
.setup-form .bgroup-input[readonly]:focus { border-color: var(--bgroup-line-strong); box-shadow: none; }

.setup-show { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font: var(--bgroup-text-small); color: var(--bgroup-ink); }
.setup-show[hidden] { display: none; }
.setup-show input { width: 18px; height: 18px; margin: 0; accent-color: var(--bgroup-forest); }
.setup-show label { cursor: pointer; }

.setup-next { margin: 0; font: var(--bgroup-text-small); color: var(--bgroup-slate); }

/* What happens after the form is sent: a short numbered list above the button, in the quiet small type of the hints. */
.setup-after { margin: 2px 0 0; padding: 14px 16px; border: var(--bgroup-border-hairline); border-radius: var(--bgroup-radius-control); background: var(--bgroup-surface); }
.setup-after h2 { margin: 0 0 6px; font: 600 14px/20px var(--bgroup-font-sans); color: var(--bgroup-ink); }
.setup-after ol { margin: 0; padding-left: 20px; font: var(--bgroup-text-small); color: var(--bgroup-slate); }
.setup-after li + li { margin-top: 4px; }

/* The pages of the password flows (forgot.html, forgot-sent.html, reset.html, account-password.html): a link under the form. */
.setup-back { margin-top: 20px; }
.setup-next + .setup-next { margin-top: 12px; }
.setup-next a { color: var(--bgroup-forest); }