/* Shared styles for the TOTP / 2FA management dialogs in mina-sidor's
   SecuritySection. Each <dialog>-based modal (TotpSetup, BackupCodes,
   TotpDisable, BackupRegenerate) ports these defaults — extracting
   them here keeps the per-modal component focused on its own form
   while the framing chrome stays consistent.

   Loaded globally so all four dialog components can attach the
   `.modal` class without re-declaring the shell. Same approach
   components.css used for the strangler-fig phase. */

.modal {
	border: 0;
	border-radius: var(--radius-lg);
	padding: 0;
	max-width: var(--w-modal-lg);
	width: 92vw;
	max-height: 90vh;
	overflow: hidden;
	background: var(--surface-card);
	color: var(--charcoal);
	box-shadow: var(--shadow-modal);
	/* Restore the dialog's UA-default centering. base.css's universal
	   `* { margin: 0 }` reset stomps the user-agent `margin: auto` that
	   <dialog>:modal relies on for centring, pinning every modal to
	   the top-left otherwise. */
	margin: auto;
}
.modal::backdrop {
	background: var(--scrim);
}
.modal form {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}
.modal header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--border);
}
.modal header h3 {
	margin: 0;
	font-size: var(--text-md);
}
.modal .modal-close {
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: var(--leading-tight);
	cursor: pointer;
	padding: 0 var(--space-1);
	color: var(--text-muted);
}
.modal .modal-body {
	padding: var(--space-5);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.modal .modal-body p {
	margin: 0;
	font-size: var(--text-base);
	line-height: var(--leading-comfortable);
}
.modal .modal-body label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--text-base);
}
.modal .modal-body label input {
	padding: 0.55rem var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	font-family: inherit;
}
.modal .code-input {
	font-family: monospace !important;
	font-size: var(--text-md) !important;
	letter-spacing: 0.25rem;
	text-align: center;
}
.modal footer {
	padding: var(--space-3) var(--space-5);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}
.modal .modal-err {
	color: var(--danger);
	font-size: var(--text-base);
	margin: 0;
}