/* Log in (/signin), /start, the setting-up screen and your account (/account): fields, the Google
   button, notes and form messages. Sits on the plain shell (no cards) and site.css's tokens (--petrol,
   --line, --muted, --radius…); /account's own dashboard layout is in account-page.css. */

.account-form {
	display: grid;
	gap: 0.875rem;
	margin-top: 1.25rem;
}

.account-form[hidden],
.account-section[hidden] {
	display: none;
}

.account-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="text"] {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--field);
	border-radius: var(--radius, 8px);
	background: var(--paper);
	color: var(--ink, #16202a);
	font: 400 1rem var(--sans, system-ui, sans-serif);
}

.account-form input.code {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	font-size: 1.375rem;
	letter-spacing: 0.3em;
	text-align: center;
}

.account-form input:focus {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
	border-color: var(--petrol);
}

.account-form .btn,
.btn-google {
	width: 100%;
	justify-content: center;
	min-height: 2.75rem;
}

.btn-google {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 1.25rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--field);
	border-radius: var(--radius, 8px);
	background: var(--paper);
	color: var(--ink, #16202a);
	font: 600 1rem var(--sans, system-ui, sans-serif);
	cursor: pointer;
}

.btn-google:hover {
	border-color: var(--petrol, #2b5460);
}

.btn-google:focus-visible,
.link-button:focus-visible {
	outline: 2px solid var(--petrol, #2b5460);
	outline-offset: 2px;
}

.or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	color: var(--muted, #5b6770);
	font-size: 0.875rem;
}

.or::before,
.or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--line, #e3ebed);
}

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--petrol, #2b5460);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.form-message {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
}

.form-message:empty {
	display: none;
}

.form-message.is-error {
	color: var(--stamp, #b42318);
}

.form-message.is-ok {
	color: var(--ok, #1f7a4d);
}

.account-note {
	margin: 1rem 0 0;
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius, 8px);
	background: var(--mist, #f2f7f8);
	font-size: 0.9375rem;
}

.account-aside {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--muted, #5b6770);
}

.plain-card > .hint {
	margin-top: 0.5rem;
}

/* the setting-up screen (which loads this file too): Open <company> may be long, so it wraps; the
   line under it says it opens in a new tab */
.setup-open .btn {
	white-space: normal;
	text-align: center;
	overflow-wrap: anywhere;
}

.setup-open-note {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted, #5b6770);
}

/* the honeypot: only bots fill it in */
.hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}