/* ============================================================
   The login popup
   ============================================================
   Covers the app rather than sitting in it, because a passphrase is
   the one thing here worth a reader's whole attention.
   ============================================================ */

.login-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-login, 200);
	background: var(--login-scrim);
	/* Centred, and pushed off the top edge on a short screen so the card
	   never sits under a browser's own furniture. */
	align-items: center;
	justify-content: center;
	padding: var(--sp-md);
	overflow-y: auto;
}
.login-popup.open { display: flex; }

.login-card {
	position: relative;
	width: 100%;
	max-width: var(--login-w);
	background: var(--login-bg);
	border-radius: var(--login-radius);
	padding: var(--login-pad);
}
.login-card .close-btn {
	position: absolute;
	top: var(--close-pad);
	right: var(--close-pad);
	cursor: pointer;
	width: var(--close-size);
	height: var(--close-size);
	opacity: var(--close-opacity);
}
.login-card .close-btn:hover { opacity: var(--close-opacity-hover); }

.login-card h2 {
	font-family: var(--login-heading-font);
	font-size: var(--login-heading-size);
	color: var(--login-heading-color);
	margin-bottom: var(--sp-sm);
}
.login-lede {
	font-family: var(--login-font);
	font-size: var(--login-lede-size);
	line-height: 1.5;
	color: var(--login-color);
	margin-bottom: var(--sp-lg);
}
.login-note {
	font-family: var(--login-font);
	font-size: var(--login-note-size);
	line-height: 1.5;
	color: var(--login-note-color);
	margin-bottom: var(--sp-lg);
}
/* --- The field --- */
.login-field {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	background: var(--login-input-bg);
	border-radius: var(--input-radius);
	padding: var(--input-pad);
}
.login-field input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--login-font);
	font-size: var(--login-input-size);
	color: var(--login-color);
}
.login-field input::placeholder { color: var(--input-placeholder); }
/* Monospace once revealed, so a word can be checked letter by letter against
   whatever it was written on. */
.login-field input.login-revealed {
	font-family: var(--login-mono);
	letter-spacing: 0.02em;
}
.login-eye {
	flex-shrink: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--login-eye-size);
	color: var(--login-eye-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0;
}
.login-eye:hover { text-decoration: underline; }

/* --- The word count --- */
.login-count {
	min-height: 1.2em;
	margin: var(--sp-xs) 0 0;
	font-family: var(--font-ui);
	font-size: var(--login-count-size);
	color: var(--login-count-color);
}
.login-count-ok { color: var(--login-count-ok-color); }

/* --- What went wrong --- */
.login-msg {
	min-height: 1.2em;
	margin: var(--sp-xs) 0 var(--sp-sm);
	font-family: var(--font-ui);
	font-size: var(--login-count-size);
	color: var(--login-color);
}
.login-msg-bad { color: var(--login-bad-color); }

/* --- The buttons --- */
.login-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-md);
}
.login-btn {
	background: var(--send-btn-bg);
	color: var(--send-btn-color);
	font-family: var(--send-btn-font);
	font-size: var(--send-btn-font-size);
	border: none;
	border-radius: var(--send-btn-radius);
	padding: var(--send-btn-pad);
	cursor: pointer;
}
.login-btn:hover { opacity: var(--send-btn-hover-opacity); }
.login-btn:disabled { opacity: 0.5; cursor: default; }
/* The second way out of the card, which is not the main one. */
.login-btn-quiet {
	background: transparent;
	color: var(--login-quiet-color);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
}
.login-btn-quiet:hover { opacity: 1; color: var(--login-heading-color); }

/* --- The passphrase just made ---
   Big, monospaced and selectable: it is going to be copied onto paper, and
   every word has to be legible without doubt about which letter is which. */
.login-made-pp {
	font-family: var(--login-mono);
	font-size: var(--login-made-size);
	line-height: 1.8;
	color: var(--login-made-color);
	background: var(--login-input-bg);
	border-radius: var(--input-radius);
	padding: var(--sp-md);
	margin-bottom: var(--sp-md);
	word-spacing: 0.4em;
	user-select: all;
}

@media (max-width: 767px) {
	.login-card { padding: var(--login-pad-mobile); }
}