/*
 * SlipStage's account pages.  Little of their own: fonts and colours come from the page
 * around them, so they sit in the WordPress theme as if it drew them.  What they do set
 * for fields and buttons sits in :where(), so a theme's own styles win.
 */

/* Room under the site's header: on a page without its title, the page starts here.  Padding,
   as WordPress's layout takes the top margin off a page's first block. */
.slipstage
{
	max-width: 32rem;
	padding-block-start: var( --wp--preset--spacing--50, 2rem );
}

.slipstage-form
{
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0;
}

.slipstage-form label
{
	display: grid;
	gap: 0.25rem;
}

:where( .slipstage-form ) input
{
	font: inherit;
	padding: 0.5rem;
}

/* The buttons carry .wp-element-button, which a block theme styles */
:where( .slipstage ) button
{
	font: inherit;
	padding: 0.5rem 1rem;
}

.slipstage button
{
	cursor: pointer;
	justify-self: start;
}

.slipstage button:disabled
{
	cursor: progress;
	opacity: 0.6;
}

.slipstage-notice
{
	padding: 0.5rem 0.75rem;
	border-left: 4px solid currentColor;
}

/* A theme's own error and success colours, where it has them, as the SlipStage theme does */
.slipstage-error
{
	color: var( --wp--preset--color--error, #a8071a );
}

.slipstage-success
{
	color: var( --wp--preset--color--success, #146c2e );
}

.slipstage-links
{
	padding-left: 1.25rem;
}

/* Dark modules on white, whatever the theme: a camera needs the contrast */
.slipstage-qr
{
	width: min( 80vw, 22rem );
	background: #ffffff;
	color: #000000;
	margin: 1rem 0;
}

.slipstage-qr svg
{
	display: block;
	width: 100%;
	height: auto;
}

.slipstage-digits
{
	font-size: 2.5rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	margin: 0.5rem 0;
}