/**
 * Auth screens (/login, /register, /reset) — page layout only.
 *
 * The split shell itself (.myco-auth, __brand, __pane, __card) lives in
 * chrome.css. This sheet sizes the form card and its parts and adds the two
 * pieces the single-card reset page needs. Tokens only.
 */

/* ---- Brand pane ------------------------------------------------------- */

/* Dark pane against a dark page in the dark theme: a hairline keeps the
   split readable (invisible in light, where the two surfaces differ). */
.myco-auth__brand {
	border-right: 1px solid var( --myco-line-on-dark );
}

/* ---- Form card -------------------------------------------------------- */

/* The shared card padding is sized for panel cards; an auth card owns the
   whole pane and breathes more. */
.myco-auth__card .myco-card {
	padding: 28px 26px;
}

/* Design: Fraunces 24 for the one heading on the page. */
.myco-auth__title {
	font-size: 24px;
}

.myco-auth__card .myco-card__lead {
	margin-top: 6px;
}

.myco-auth__card .myco-form {
	margin-top: 20px;
}

/* Consent / remember rows: wrapping text keeps its box aligned to the first
   line, not to the middle of the paragraph. */
.myco-auth__card .myco-checkbox {
	align-items: flex-start;
	line-height: 1.45;
}

.myco-auth__card .myco-checkbox input[type="checkbox"] {
	margin-top: 1px;
}

.myco-auth__card .myco-links {
	margin-top: 16px;
}

/* Optional company / phone pair sits side by side on the wide card. */
.myco-auth__pair {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
}

.myco-auth .myco-links a {
	color: var( --myco-link );
}

.myco-auth .myco-links a:hover {
	color: var( --myco-link-hover );
}

/* ---- Reset: single centred card --------------------------------------- */

.myco-auth--single .myco-auth__solo-brand {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

/* .myco-brand is written for the dark sidebar; on the light pane it needs
   the page ink instead of cream. */
.myco-auth--single .myco-brand,
.myco-auth--single .myco-brand:hover {
	padding: 0;
	color: var( --myco-ink );
}

.myco-auth--single .myco-links {
	justify-content: center;
}

/* ---- Narrow ----------------------------------------------------------- */

@media ( max-width: 900px ) {
	.myco-auth__brand {
		border-right: 0;
		border-bottom: 1px solid var( --myco-line-on-dark );
	}

	.myco-auth__card .myco-card {
		padding: 22px 18px;
	}

	.myco-auth__pair {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}
}