/* Sundial Blind Builder 4.7: the compact client sign-in at the top of the
   Builder page, the "Become a client" form and its thank-you (prefix sb-signin,
   sb-join). Loaded by sundial_bb_client_bar() only where it prints them.
   One row like the site menu's sign-in on a computer, two rows on a tablet,
   one folded line on a phone (the button opens and closes it in place). */

.sb-signin {
	--sbs-ink: #1d1d1f;
	--sbs-ink2: #424245;
	--sbs-ink3: #636366;
	--sbs-line: #e5e5ea;
	--sbs-line2: #d2d2d7;
	--sbs-strong: #86868b;
	--sbs-accent: #0066cc;
	--sbs-accent-h: #0055aa;
	--sbs-soft: #eef4fb;
	--sbs-bad: #b3261e;
	--sbs-ok: #1d6b34;
	--sbs-sun: #f5a300;
	--sbs-sun-soft: #fff5dc;
	container-type: inline-size;
	margin: 0 0 16px;
	color: var(--sbs-ink);
	font-family: var(--bb-body, var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
	line-height: 1.4;
}
.sb-signin *, .sb-signin *::before, .sb-signin *::after { box-sizing: border-box; }
.sb-signin p { margin: 0; }
.sb-signin [hidden] { display: none !important; }

.sb-signin__card {
	background: #fff;
	border: 1px solid var(--sbs-line);
	border-radius: 14px;
	padding: 14px 20px 16px;
}

/* ---- the row: title + line, Username, Password, Sign in, Forgot ---- */
.sb-signin .sb-signin__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "user" "pass" "go" "alt" "line";
	align-items: end;
	gap: 12px 16px;
	margin: 0;
	padding: 0;
}
.sb-signin .sb-signin__title { grid-area: title; align-self: end; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--sbs-ink); }
.sb-signin .sb-signin__line { grid-area: line; align-self: start; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--sbs-ink3); }
.sb-signin__line a { color: var(--sbs-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sb-signin__line a:hover { color: var(--sbs-accent-h); }

.sb-signin .sb-signin__field { display: grid; gap: 6px; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--sbs-ink2); }
.sb-signin .sb-signin__field--user { grid-area: user; }
.sb-signin .sb-signin__field--pass { grid-area: pass; }
.sb-signin .sb-signin__field > span { white-space: nowrap; }
.sb-signin .sb-signin__input {
	display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 12px;
	border: 1px solid var(--sbs-strong); border-radius: 10px; background: #fff;
	font: inherit; font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--sbs-ink);
	box-shadow: none; -webkit-appearance: none; appearance: none;
}
.sb-signin .sb-signin__input:hover { border-color: var(--sbs-ink2); }
.sb-signin .sb-signin__input:focus { outline: 2px solid var(--sbs-accent); outline-offset: 1px; border-color: var(--sbs-accent); }
.sb-signin .sb-signin__input[aria-invalid="true"] { border-color: var(--sbs-bad); }

.sb-signin .sb-signin__go {
	grid-area: go;
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 20px;
	border: 0; border-radius: 10px; background: var(--sbs-accent); color: #fff;
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none;
	white-space: nowrap; cursor: pointer; box-shadow: none;
}
.sb-signin .sb-signin__go:hover { background: var(--sbs-accent-h); color: #fff; }
.sb-signin .sb-signin__go:active { transform: translateY(1px); }
.sb-signin .sb-signin__go:focus-visible { outline: 2px solid var(--sbs-accent); outline-offset: 2px; }

/* "Forgot your password?" sits in the row like the menu's link; its panel opens under the row. */
.sb-signin .sb-signin__form .bb3-forgot-toggle {
	grid-area: alt; justify-self: start;
	display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0 2px;
	border: 0; border-radius: 6px; background: none;
	font: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: var(--sbs-accent);
	text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sb-signin .sb-signin__form .bb3-forgot-toggle::after { content: none; }
.sb-signin .sb-signin__form .bb3-forgot-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.sb-signin .sb-signin__form .bb3-forgot-toggle:focus-visible { outline: 2px solid var(--sbs-accent); outline-offset: 2px; }

.sb-signin .sb-signin__msg { margin-top: 12px; font-size: 14px; line-height: 1.45; }
.sb-signin .sb-signin__msg--bad { color: var(--sbs-bad); font-weight: 600; }
.sb-signin .sb-signin__msg--wait { padding: 10px 12px; border-radius: 10px; background: var(--sbs-sun-soft); border: 1px solid #f3d38a; color: var(--sbs-ink); font-weight: 500; }

.sb-signin .bb3-forgot { margin: 0; }
.sb-signin .bb3-forgot-form { padding-top: 12px; }
.sb-signin .bb3-forgot-form label { font-size: 14px; font-weight: 500; color: var(--sbs-ink2); }
.sb-signin .bb3-forgot-form input { height: 44px; border: 1px solid var(--sbs-strong); border-radius: 10px; font-size: 16px; }
.sb-signin .bb3-forgot-form input:focus { outline: 2px solid var(--sbs-accent); outline-offset: 1px; border-color: var(--sbs-accent); }
.sb-signin .bb3-forgot-form .bb3-btn { height: 44px; border-radius: 10px; font-size: 15px; }
.sb-signin .bb3-forgot-msg { font-size: 14px; }

/* The builder's own notices (a dead invitation link) and the administrator's line. */
.sb-signin .bb3-reg-invalid { margin: 0 0 10px; }
.sb-signin .bb3-client-admin { margin: 8px 0 0; font-size: 13px; color: var(--sbs-ink3); }
.sb-signin .bb3-client-admin a { color: var(--sbs-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- the fold (phones): one line with a clear Show / Hide button ---- */
.sb-signin__toggle { display: none; }

@media screen and (max-width: 699px) {
	.sb-signin { margin-bottom: 12px; }
	.sb-signin__card { padding: 0; }
	.sb-signin .sb-signin__toggle {
		display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 14px 0 16px;
		border: 0; border-radius: 14px; background: none; color: var(--sbs-ink);
		font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: left; letter-spacing: normal; text-transform: none; cursor: pointer;
	}
	.sb-signin .sb-signin__toggle:focus-visible { outline: 2px solid var(--sbs-accent); outline-offset: 2px; }
	.sb-signin__toggle-icon { flex: none; width: 20px; height: 20px; color: var(--sbs-ink3); }
	.sb-signin__toggle-t { flex: 1 1 auto; min-width: 0; }
	.sb-signin__toggle-a { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--sbs-accent); }
	.sb-signin__toggle-a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; }
	.sb-signin.is-open .sb-signin__toggle-a::after { margin-top: 3px; transform: rotate(-135deg); }
	.sb-signin__toggle-a .sb-signin__when-open { display: none; }
	.sb-signin.is-open .sb-signin__toggle-a .sb-signin__when-open { display: inline; }
	.sb-signin.is-open .sb-signin__toggle-a .sb-signin__when-shut { display: none; }
	.sb-signin__body { display: none; padding: 2px 16px 16px; }
	.sb-signin.is-open .sb-signin__body { display: block; }
	/* The title is the button's; the "Become a client" line comes last. */
	.sb-signin .sb-signin__title { display: none; }
	.sb-signin .sb-signin__form { grid-template-areas: "user" "pass" "go" "alt" "line"; }
	.sb-signin .sb-signin__line { padding-top: 4px; }
	.sb-signin .sb-signin__form .bb3-forgot-toggle { margin: -4px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-signin__toggle-a::after { transition: none; }
}

/* ---- tablet: the title on its own line, the boxes in one row ---- */
@container (min-width: 560px) {
	.sb-signin .sb-signin__form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
		grid-template-areas: "title title line line" "user pass go alt";
	}
	.sb-signin .sb-signin__title { align-self: center; }
	.sb-signin .sb-signin__line { align-self: center; justify-self: end; text-align: right; }
	.sb-signin .sb-signin__go { width: auto; }
}
/* ---- computer: one row, as in the menu ---- */
@container (min-width: 1000px) {
	.sb-signin .sb-signin__form {
		grid-template-columns: minmax(0, 1fr) 240px 240px auto auto;
		grid-template-areas: "title user pass go alt" "line user pass go alt";
		row-gap: 0;
	}
	.sb-signin .sb-signin__title { align-self: end; }
	.sb-signin .sb-signin__line { align-self: start; justify-self: start; text-align: left; margin-top: 2px; }
}

/* ================================================================
   "Become a client" (?pb_join=1) and the thank-you. The form itself uses
   the builder's registration form (the .bb3-reg rules of builder.css), so it
   looks the same as the invitation form.
   ================================================================ */
.sb-join .bb3-reg { margin: 0; }
.sb-join__back { margin: 12px 0 0; font-size: 14px; color: var(--sbs-ink3); }
.sb-join__back a { color: var(--sbs-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sb-join__done { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.sb-join__done-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sbs-sun-soft); color: #8a5a00; }
.sb-join__done-icon svg { width: 22px; height: 22px; }
.sb-signin .sb-join__done-title { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.sb-signin .sb-join__done-text { font-size: 15px; line-height: 1.5; color: var(--sbs-ink2); }
@media screen and (max-width: 699px) {
	.sb-join .sb-signin__card, .sb-signin--done .sb-signin__card { padding: 14px 16px 16px; }
}