/*
 * SkillionsPro Portal - portal document base (templates/portal/page.php). No theme CSS loads on that page,
 * so this styles the page itself plus the standalone login and status screens. The app shell is in shell.css.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.spp-portal {
	margin: 0;
	min-height: 100vh;
	background: var(--spp-bg);
	font-size: 15px;
}

.spp-portal img { max-width: 100%; }

/* Skip link: hidden until focused */
.spp .spp-skip {
	position: fixed;
	top: -200px; /* far enough that its shadow is off-screen too */
	inset-inline-start: 8px;
	z-index: 100;
	padding: var(--spp-space-2) var(--spp-space-4);
	border-radius: var(--spp-radius);
	background: var(--spp-surface);
	color: var(--spp-primary);
	box-shadow: var(--spp-shadow-lg);
	font-weight: 600;
}
.spp .spp-skip:focus { top: 8px; }

/* Standalone screens (login, status): one centred card */
.spp .spp-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spp-space-5);
	min-height: 100vh;
	padding: var(--spp-space-6) var(--spp-space-4);
}
.spp .spp-screen__brand { margin: 0; font: 700 22px/1.2 var(--spp-font); color: var(--spp-text); }
.spp .spp-screen__brand img { display: block; width: auto; max-height: 56px; }
.spp .spp-screen .spp-public { width: 100%; padding: 0; }

.spp .spp-status { width: 100%; max-width: 480px; padding: var(--spp-space-6); text-align: center; }
.spp .spp-status__icon {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--spp-space-4);
	border-radius: var(--spp-radius-full);
}
.spp .spp-status__icon .spp-icon { width: 30px; height: 30px; }
.spp .spp-status__title { margin: 0 0 var(--spp-space-2); font: 600 22px/1.3 var(--spp-font); color: var(--spp-text); }
.spp .spp-status__text { margin: 0 0 var(--spp-space-5); color: var(--spp-muted); }
.spp .spp-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spp-space-3); }

@media (max-width: 767px) {
	.spp .spp-status { padding: var(--spp-space-5); }
	.spp .spp-status__actions .spp-btn { flex: 1 1 100%; }
}