/**
 * The UsersWP pages: account, login, register, passwords.
 *
 * UsersWP renders these from Bootstrap — a grey sidebar, hidden labels, and
 * Bootstrap's own blue submit button — which is the one corner of the site that
 * still looked like a plugin rather than like the Directory.
 *
 * Nothing here changes the markup: the field names, the nonces, the image
 * uploader and the account tabs are UsersWP's and are untouched. Two things do
 * change what a reader sees rather than only how it looks, and both are
 * deliberate:
 *
 *   - The labels are unhidden. UsersWP marks them `visually-hidden` and leans
 *     on placeholders, which vanish the moment you type — so on a form of six
 *     fields you cannot check what you have filled in. Every other form on this
 *     site labels its fields.
 *   - The sidebar's "Logout" is set apart from the settings above it, because
 *     it is not one of them.
 */

/* ==========================================================================
   The page
   ========================================================================== */

body.uwp_page #brx-content.wordpress {
	width: 1240px;
	/* The theme's own max-width is a pixel value, not 100%. */
	max-width: 100%;
}

body.uwp_page #brx-content > h1 {
	max-width: 1180px;
	margin: var(--gcn-space-10) auto var(--gcn-space-6);
	font-size: var(--gcn-text-3xl);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.uwp-account-class,
body.uwp_page .uwp_widgets {
	max-width: 1180px;
	margin: 0 auto var(--gcn-space-16);
}

/* wpautop leaves empty paragraphs between UsersWP's elements. */
body.uwp_page .uwp_widgets p:empty {
	display: none;
}

/* Bootstrap's container adds gutters inside a page that already has them. */
body.uwp_page .uwp_page > .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.uwp_page .uwp_page > .container > .row {
	gap: var(--gcn-space-6);
	margin: 0;
}

body.uwp_page .uwp_page .col-lg-3,
body.uwp_page .uwp_page .col-lg-9 {
	padding-left: 0;
	padding-right: 0;
}

body.uwp_page .uwp_page .col-lg-3 {
	flex: 0 0 clamp( 16rem, 24%, 20rem );
	max-width: 20rem;
}

body.uwp_page .uwp_page .col-lg-9 {
	flex: 1 1 22rem;
	max-width: none;
}

/* ==========================================================================
   The sidebar
   ========================================================================== */

body.uwp_page .uwp_page .col-lg-3 .bg-light {
	padding: var(--gcn-space-6) var(--gcn-space-4) var(--gcn-space-5) !important;
	background: var(--gcn-surface) !important;
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
}

/* The avatar, on the brand band that heads the panel. */
body.uwp_page .uwp_page .col-lg-3 .avatar {
	width: 96px !important;
	height: 96px !important;
	object-fit: cover;
	border: 4px solid var(--gcn-surface) !important;
	box-shadow: var(--gcn-shadow-md);
}

body.uwp_page .uwp_page .col-lg-3 a[title] {
	display: inline-block;
	margin-top: var(--gcn-space-2);
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold) !important;
	color: var(--gcn-text) !important;
}

body.uwp_page .uwp_page .col-lg-3 a[title]:hover {
	color: var(--gcn-brand-strong) !important;
}

/* The settings list. */
body.uwp_page .uwp_page .col-lg-3 ul.nav {
	display: block;
	width: 100%;
	margin-top: var(--gcn-space-5) !important;
	padding-top: var(--gcn-space-4) !important;
	border-top: 1px solid var(--gcn-rule);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-item {
	margin: 0 !important;
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-3);
	padding: 0.65em 0.8em !important;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-soft) !important;
	border-radius: var(--gcn-radius-sm);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background var(--gcn-duration) var(--gcn-ease);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link i {
	width: 1.1em;
	color: var(--gcn-text-faint);
	transition: color var(--gcn-duration) var(--gcn-ease);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link:hover {
	color: var(--gcn-brand-strong) !important;
	background: var(--gcn-brand-soft);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link:hover i {
	color: var(--gcn-brand);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link.active {
	color: var(--gcn-brand-strong) !important;
	font-weight: var(--gcn-weight-semibold);
	background: var(--gcn-brand-soft);
}

body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link.active i {
	color: var(--gcn-brand);
}

/* Logging out is not a setting, so it sits apart from them. */
body.uwp_page .uwp_page .col-lg-3 ul.nav .uwp-account-logout {
	margin-top: var(--gcn-space-3);
	padding-top: var(--gcn-space-4) !important;
	color: var(--gcn-text-muted) !important;
	border-top: 1px solid var(--gcn-rule);
	border-radius: 0;
}

/* ==========================================================================
   The form
   ========================================================================== */

body.uwp_page .uwp_page .col-lg-9 > div {
	padding: var(--gcn-space-8) !important;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

body.uwp_page .uwp_page h3 {
	margin-bottom: var(--gcn-space-6) !important;
	padding-bottom: var(--gcn-space-3);
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
	border-bottom: 1px solid var(--gcn-rule);
	position: relative;
}

body.uwp_page .uwp_page h3::after {
	content: "";
	position: absolute;
	inset: auto auto -1px 0;
	width: 3rem;
	height: 2px;
	background: var(--gcn-brand);
}

body.uwp_page .uwp_form [data-argument] {
	margin-bottom: var(--gcn-space-5) !important;
}

/*
 * The labels, unhidden. See the note at the top: a placeholder disappears as
 * soon as somebody types, and this form has six fields.
 */
body.uwp_page .uwp_form label.visually-hidden {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 var(--gcn-space-2) !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
	display: block;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text);
}

body.uwp_page .uwp_form .text-danger {
	color: var(--gcn-critical) !important;
	font-weight: var(--gcn-weight-semibold);
}

body.uwp_page .uwp_form .form-control,
body.uwp_page .uwp_form .form-select,
body.uwp_page .uwp_form input[type="text"],
body.uwp_page .uwp_form input[type="email"],
body.uwp_page .uwp_form input[type="password"],
body.uwp_page .uwp_form input[type="url"],
body.uwp_page .uwp_form textarea {
	width: 100%;
	padding: 0.75em 0.95em;
	font-size: var(--gcn-text-md);
	color: var(--gcn-text);
	background-color: var(--gcn-surface-sunken);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	box-shadow: none;
	transition:
		border-color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

body.uwp_page .uwp_form .form-control:hover,
body.uwp_page .uwp_form input:hover,
body.uwp_page .uwp_form textarea:hover {
	border-color: var(--gcn-rule-strong);
}

body.uwp_page .uwp_form .form-control:focus,
body.uwp_page .uwp_form .form-select:focus,
body.uwp_page .uwp_form input:focus,
body.uwp_page .uwp_form textarea:focus {
	background-color: var(--gcn-surface);
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
	outline: none;
}

body.uwp_page .uwp_form textarea {
	min-height: 8rem;
	line-height: var(--gcn-leading-relaxed);
	resize: vertical;
}

body.uwp_page .uwp_form ::placeholder {
	color: var(--gcn-text-faint);
}

body.uwp_page .uwp_form .form-text,
body.uwp_page .uwp_form small {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted) !important;
}

/* Checkboxes: the notification and privacy tabs are made of them. */
body.uwp_page .uwp_form .form-check-input:checked {
	background-color: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

body.uwp_page .uwp_form .form-check-input:focus {
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
}

/* ==========================================================================
   Buttons and notices
   ========================================================================== */

body.uwp_page .uwp_form .btn-primary,
body.uwp_page .uwp_form input[type="submit"],
body.uwp_page .uwp_form button[type="submit"] {
	padding: 0.8em 1.8em !important;
	font-size: var(--gcn-text-md) !important;
	font-weight: var(--gcn-weight-semibold) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--gcn-brand-contrast) !important;
	background: var(--gcn-brand) !important;
	border: 1px solid var(--gcn-brand) !important;
	border-radius: var(--gcn-radius-md) !important;
	box-shadow: var(--gcn-shadow-sm);
	transition:
		background var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

body.uwp_page .uwp_form .btn-primary:hover,
body.uwp_page .uwp_form input[type="submit"]:hover,
body.uwp_page .uwp_form button[type="submit"]:hover {
	background: var(--gcn-brand-strong) !important;
	border-color: var(--gcn-brand-strong) !important;
	box-shadow: var(--gcn-shadow-md);
}

body.uwp_page .uwp_page .alert-success,
body.uwp_page .uwp_page .alert-info {
	color: var(--gcn-positive) !important;
	background: var(--gcn-positive-soft) !important;
	border: 0 !important;
	border-radius: var(--gcn-radius-md);
}

body.uwp_page .uwp_page .alert-danger,
body.uwp_page .uwp_page .alert-warning {
	color: var(--gcn-critical) !important;
	background: var(--gcn-critical-soft) !important;
	border: 0 !important;
	border-radius: var(--gcn-radius-md);
}

/* The camera button over the avatar. */
body.uwp_page .uwp-banner-change-icon {
	color: #fff !important;
	background: hsl(0 0% 0% / 0.4) !important;
	border-radius: var(--gcn-radius-pill) !important;
}

/* ==========================================================================
   Login, register and the password forms
   ==========================================================================
   Same markup, one column. They get the card without the sidebar rules.
   ========================================================================== */

/*
 * These wrap their form in `.uwp-login-class` / `.uwp-register-class` and so on,
 * not in a widget div — the card is the .card inside them. Targeting the widget
 * class left the form running the full width of the page.
 */
.uwp-login-class .card,
.uwp-register-class .card,
.uwp-forgot-class .card,
.uwp-reset-class .card,
.uwp-change-class .card {
	max-width: 34rem;
	margin: 0 auto var(--gcn-space-16) !important;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule) !important;
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

.uwp-login-class .card-body,
.uwp-register-class .card-body,
.uwp-forgot-class .card-body,
.uwp-reset-class .card-body,
.uwp-change-class .card-body {
	padding: var(--gcn-space-8) !important;
}

/* Their headings read like the account panel's. */
.uwp-login-class h2,
.uwp-register-class h2,
.uwp-forgot-class h2,
.uwp-reset-class h2 {
	margin-bottom: var(--gcn-space-5);
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/* The "no account yet?" line under the form. */
.uwp-login-class .card-footer,
.uwp-register-class .card-footer {
	padding: var(--gcn-space-4) var(--gcn-space-8) !important;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken) !important;
	border-top: 1px solid var(--gcn-rule) !important;
}

.uwp-login-class a,
.uwp-register-class a {
	color: var(--gcn-brand-strong);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 991px) {

	body.uwp_page .uwp_page > .container > .row {
		display: block;
	}

	body.uwp_page .uwp_page .col-lg-3,
	body.uwp_page .uwp_page .col-lg-9 {
		max-width: none;
	}

	body.uwp_page .uwp_page .col-lg-3 {
		margin-bottom: var(--gcn-space-5);
	}

	/* The settings become a row of chips above the form. */
	body.uwp_page .uwp_page .col-lg-3 ul.nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gcn-space-2);
		justify-content: center;
	}

	body.uwp_page .uwp_page .col-lg-3 ul.nav .nav-link {
		padding: 0.5em 0.9em !important;
		font-size: var(--gcn-text-sm);
		background: var(--gcn-surface-sunken);
		border-radius: var(--gcn-radius-pill);
	}

	body.uwp_page .uwp_page .col-lg-3 ul.nav .uwp-account-logout {
		margin-top: 0;
		padding-top: 0.5em !important;
		border-top: 0;
		border-radius: var(--gcn-radius-pill);
	}

	body.uwp_page .uwp_page .col-lg-9 > div {
		padding: var(--gcn-space-5) !important;
	}
}