/* WIZSP Portal — front-end components.
 *
 * Built entirely on the design system's :root tokens. It cannot reuse that
 * plugin's own components: every one of them is scoped to
 * body.wizsp-shell-page, i.e. wp-admin. The tokens are global, the
 * components are not — which is exactly the split the design system's own
 * header describes ("a component NOT covered here stays in that plugin's
 * own stylesheet — but it must consume the tokens below via var()").
 *
 * Hard rules inherited: no gradients, no drop shadows, surfaces separate
 * by a 1px border only, one radius scale.
 */

.wzpt-page {
	margin: 0;
	min-height: 100vh;
	background: var(--wizsp-page-bg);
	font: var(--wizsp-text-body);
	color: var(--wizsp-text-primary);
	-webkit-font-smoothing: antialiased;
}

/* --- Top bar ------------------------------------------------------------ */

.wzpt-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wizsp-space-4);
	padding: var(--wizsp-space-4) var(--wizsp-space-8);
	background: var(--wizsp-primary);
}

.wzpt-brand {
	display: flex;
	align-items: center;
	gap: var(--wizsp-space-3);
}

/* No circle, no tinted plate. The mark is already drawn for a dark
 * background, so a lighter disc behind it only announces where the PNG
 * ends. object-fit: contain, not cover: the file is not guaranteed square,
 * and cover crops whatever does not fit rather than showing the mark. */
.wzpt-brand__logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.wzpt-brand__name {
	font: var(--wizsp-text-h3);
	color: #fff;
}

.wzpt-bar__user {
	display: flex;
	align-items: center;
	gap: var(--wizsp-space-4);
	font: var(--wizsp-text-body);
	color: var(--wizsp-ondark-text);
}

.wzpt-bar__link {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--wizsp-ondark-border);
	padding-bottom: 1px;
}

/* --- Page --------------------------------------------------------------- */

.wzpt-main {
	max-width: 1080px;
	margin: 0 auto;
	padding: var(--wizsp-space-8) var(--wizsp-space-6) 48px;
}

.wzpt-head h1 {
	margin: 0 0 var(--wizsp-space-2);
	font: var(--wizsp-text-display);
	color: var(--wizsp-text-primary);
}

.wzpt-head p {
	margin: 0 0 var(--wizsp-space-8);
	font: var(--wizsp-text-body);
	color: var(--wizsp-text-secondary);
}

.wzpt-section-label {
	margin: 0 0 var(--wizsp-space-3);
	font: var(--wizsp-text-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wizsp-text-muted);
}

/* --- The shortcut grid --------------------------------------------------- */

.wzpt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wizsp-space-4);
	margin: 0 0 var(--wizsp-space-8);
	padding: 0;
	list-style: none;
}

/* Three across on a wide screen. Two reasons, both about reading rather
 * than density: the six stages then fall as 3 + 3 and read as a pipeline
 * — left to auto-fill they land on 4 + 2, which reads as a grid that ran
 * out of items — and the cross-cutting row below lines up with the same
 * column edges instead of sitting on a different rhythm. */
@media (min-width: 900px) {
	.wzpt-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The <li> is the grid item and stretches to the row; the <a> inside does
 * not unless told to. Without this the tiles in a row end at different
 * heights depending on how far each description wraps. */
.wzpt-grid > li {
	display: flex;
}

.wzpt-grid > li > .wzpt-tile {
	flex: 1;
}

.wzpt-tile {
	display: flex;
	flex-direction: column;
	gap: var(--wizsp-space-2);
	padding: var(--wizsp-space-4);
	background: var(--wizsp-surface);
	border: var(--wizsp-border-width) solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.wzpt-tile:hover,
.wzpt-tile:focus-visible {
	border-color: var(--wizsp-primary);
	background: var(--wizsp-primary-tint);
	outline: none;
}

.wzpt-tile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wizsp-space-1);
}

.wzpt-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--wizsp-radius-tile);
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
}

/* The stage number. Quiet on purpose — it is there to make the sequence
 * readable at a glance, not to compete with the tool name. */
.wzpt-tile__step {
	font: var(--wizsp-text-micro);
	color: var(--wizsp-text-muted);
}

.wzpt-tile__icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 1.75;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wzpt-tile__label {
	font: var(--wizsp-text-h3);
	color: var(--wizsp-text-primary);
}

.wzpt-tile__desc {
	font: var(--wizsp-text-body);
	font-size: 13px;
	color: var(--wizsp-text-secondary);
}

/* --- Login ---------------------------------------------------------------
 * The whole page is the brand navy. The form sits directly on it rather
 * than inside a white card, using the --wizsp-ondark-* tokens the design
 * system already defines for exactly this surface. */

.wzpt-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: var(--wizsp-space-6);
	background: var(--wizsp-primary);
	font: var(--wizsp-text-body);
	-webkit-font-smoothing: antialiased;
}

.wzpt-login__inner {
	width: 100%;
	max-width: 348px;
	text-align: center;
}

/* Same as .wzpt-brand__logo above: the mark on the navy, nothing behind it. */
.wzpt-login__logo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--wizsp-space-6);
	object-fit: contain;
}

.wzpt-login__title {
	margin: 0 0 var(--wizsp-space-2);
	font: var(--wizsp-text-h2);
	color: #fff;
}

.wzpt-login__sub {
	margin: 0 0 var(--wizsp-space-8);
	font: var(--wizsp-text-body);
	color: var(--wizsp-ondark-text-subtle);
}

.wzpt-field {
	margin-bottom: var(--wizsp-space-4);
	text-align: left;
}

.wzpt-field label {
	display: block;
	margin-bottom: var(--wizsp-space-1);
	font: var(--wizsp-text-label);
	color: var(--wizsp-ondark-text);
}

.wzpt-field input[type="text"],
.wzpt-field input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	font: var(--wizsp-text-body);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border: var(--wizsp-border-width) solid var(--wizsp-ondark-border);
	border-radius: var(--wizsp-radius-btn);
}

.wzpt-field input::placeholder {
	color: var(--wizsp-ondark-text-faint);
}

.wzpt-field input:focus {
	border-color: #fff;
	outline: 2px solid rgba(255, 255, 255, 0.35);
	outline-offset: 1px;
}

.wzpt-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var(--wizsp-space-6);
	font-size: 13px;
	color: var(--wizsp-ondark-text-subtle);
}

.wzpt-login__row label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* The one native control on the page. accent-color tints the browser's own
 * checkbox instead of replacing it with a div, so it keeps its keyboard
 * behaviour and its shape in every high-contrast and forced-colours mode. */
.wzpt-login__row input[type="checkbox"] {
	accent-color: #fff;
	margin: 0;
}

.wzpt-login__row a {
	color: var(--wizsp-ondark-text);
}

.wzpt-login__submit {
	display: block;
	width: 100%;
	padding: 11px 16px;
	font: var(--wizsp-text-label);
	font-size: 14px;
	color: var(--wizsp-primary);
	background: #fff;
	border: var(--wizsp-border-width) solid #fff;
	border-radius: var(--wizsp-radius-btn);
	cursor: pointer;
}

.wzpt-login__submit:hover {
	background: rgba(255, 255, 255, 0.9);
}

.wzpt-login__foot {
	margin: var(--wizsp-space-8) 0 0;
	font-size: 12px;
	color: var(--wizsp-ondark-text-faint);
}

/* One line above the form. Errors and the logged-out confirmation share a
 * shape and differ only in colour, because they are the same thing to the
 * reader: a sentence saying what just happened. */

.wzpt-login__msg {
	margin: 0 0 var(--wizsp-space-4);
	padding: var(--wizsp-space-2) var(--wizsp-space-3);
	font-size: 13px;
	text-align: left;
	border: var(--wizsp-border-width) solid var(--wizsp-ondark-border);
	border-radius: var(--wizsp-radius-btn);
	background: var(--wizsp-ondark-hover-bg);
	color: #fff;
}

/* The error border is the one place on this page that is not white-on-navy.
 * --wizsp-danger is dark red and would disappear against the navy, so the
 * border carries the signal at an opacity that survives it, and the text
 * stays white and readable. */
.wzpt-login__msg--error {
	border-color: rgba(255, 138, 138, 0.55);
}

/* --- Keyboard focus ------------------------------------------------------
 * Every interactive thing on the navy surface gets a white ring; on the
 * light dashboard the tiles already show focus through :focus-visible on
 * the tile itself, so only the bar links need one here. */

.wzpt-bar__link:focus-visible,
.wzpt-login__row a:focus-visible,
.wzpt-login__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- The registry came back empty ---------------------------------------- */

.wzpt-empty {
	margin: 0;
	padding: var(--wizsp-space-6);
	font: var(--wizsp-text-body);
	color: var(--wizsp-text-secondary);
	background: var(--wizsp-surface);
	border: var(--wizsp-border-rule);
	border-radius: var(--wizsp-radius-card);
}

/* --- Narrow screens ------------------------------------------------------
 * The bar is the only thing that actually breaks: the grid already reflows
 * on its own, and the login column is capped at 348px so it never does. */

@media (max-width: 600px) {
	.wzpt-bar {
		flex-wrap: wrap;
		gap: var(--wizsp-space-2);
		padding: var(--wizsp-space-3) var(--wizsp-space-4);
	}

	.wzpt-main {
		padding: var(--wizsp-space-6) var(--wizsp-space-4) var(--wizsp-space-8);
	}
}

/* Someone who has asked their machine for less movement gets none of the
 * tile transition. Nothing here animates for its own sake, so dropping it
 * costs the page nothing. */
@media (prefers-reduced-motion: reduce) {
	.wzpt-tile {
		transition: none;
	}
}