<?php
/**
 * Auth pages styles (Phase 14).
 */

.mat-auth {
	max-width: 52rem;
	margin: 0 auto;
	padding: 2.25rem 1rem 3.5rem;
}
body.page .mat-auth,
.mat-page .mat-auth {
	padding-top: 1.5rem;
}
.entry-content > .mat-auth:first-child,
.mat-page .entry-content > h1 + .mat-auth {
	margin-top: 0.5rem;
}
.mat-auth h1 {
	margin-top: 0;
	scroll-margin-top: 5.5rem;
}
.mat-auth__lead { color: #475569; margin-bottom: 1.25rem; }
.mat-auth__form { display: grid; gap: 0.9rem; }
.mat-auth__field { display: grid; gap: 0.35rem; font-weight: 600; }
.mat-auth__field input,
.mat-auth__field select {
	font: inherit;
	font-weight: 400;
	padding: 0.65rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	width: 100%;
}
.mat-auth__check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.mat-auth__passwrap { display: flex; gap: 0.5rem; align-items: center; }
.mat-auth__passwrap input { flex: 1; }
.mat-auth__toggle {
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	cursor: pointer;
}
.mat-auth__flash { padding: 0.85rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.mat-auth__flash--ok { background: #ecfdf5; color: #065f46; }
.mat-auth__flash--err { background: #fef2f2; color: #991b1b; }
.mat-auth__links { margin-top: 1rem; }
.mat-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.mat-account { max-width: 56rem; }
.mat-account__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 1.5rem;
}
.mat-account__nav a {
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	text-decoration: none;
	border: 1px solid #e2e8f0;
	color: inherit;
}
.mat-account__nav a.is-active { background: #0f172a; color: #fff; border-color: #0f172a; }
.mat-account__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.mat-account__widget {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem;
	display: grid;
	gap: 0.25rem;
}
.mat-account__widget strong { font-size: 1.5rem; }
.mat-account__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.mat-account__list li { padding: 0.75rem; border: 1px solid #e2e8f0; border-radius: 6px; }

.mat-portal__account-cta {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px dashed #94a3b8;
	border-radius: 8px;
	background: #f8fafc;
}

@media (max-width: 640px) {
	.mat-auth__passwrap { flex-direction: column; align-items: stretch; }
}