/* The sign-in page: a centred card of provider buttons. */

@layer pages {
	/* Signed out: a small centred card of sign-in buttons. */
	.signin-card {
		inline-size: min(100%,  32.5rem);
		margin-inline: auto;
		margin-block-start: var(--space-6);

		.signin-page & {
			margin-block: 0;
		}

		h1 {
			font-size: 1.6rem;
		}
	}

	/* The sign-in page centres its card both ways in the viewport below the top
	bar. A card taller than that room starts at the top and the page scrolls. */
	.signin-page {
		display: grid;
		place-items: center;
		min-block-size: calc(100dvh - var(--topbar-height) - 2 * var(--space-6));
		padding-block: var(--space-6);
	}

	.signin-card-options {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);

		.button {
			inline-size: 100%;
		}
	}

	/* A provider on the sign-in page: a 48px row in the body font, sentence
	case and one line. Configured, it is a link with the edge-blue border on a
	deep fill; without a client it is the same shape disabled: no fill, a faint
	hairline, dim text, no hover. */
	.signin-provider {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: 3rem;
		inline-size: 100%;
		border: 1px solid rgb(var(--ch-edge));
		padding-inline: var(--space-4);
		background: rgb(var(--ch-ink) / 90%);
		color: var(--color-text-strong);
		font: 400 1rem / 1.2 var(--font-text);
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&:is(a):hover,
		&:is(a):focus-visible {
			background: rgb(var(--ch-edge) / 18%);
		}

		&:disabled {
			border-color: var(--color-line-low);
			background: transparent;
			color: var(--color-text-dim);
			opacity: 0.6;
			cursor: default;
		}
	}
}