/**
 * Peak Lanka account styles. Breakpoints: 48rem and 70rem.
 */

/* Frontend accounts */

.pl-account {
	background: var(--pl-color-surface);
	border: 1px solid var(--pl-color-border);
	border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm);
	overflow: hidden;
}

.pl-account__header {
	background:
		radial-gradient(circle at 92% 0%, rgb(213 139 22 / 0.2), transparent 13rem),
		linear-gradient(135deg, var(--pl-color-heading), var(--pl-color-brand-strong));
	color: #dfeae7;
	padding: clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account__header .pl-eyebrow {
	color: #9ed8ce;
}

.pl-account__header h1 {
	color: #ffffff;
	font-size: var(--pl-font-size-2xl);
	margin-bottom: var(--pl-space-3);
}

.pl-account__header p:last-child {
	margin-bottom: 0;
	max-width: 44rem;
}

.pl-account-notice {
	background: #fff8eb;
	border-bottom: 1px solid #efd5a7;
	color: #714600;
	font-size: var(--pl-font-size-sm);
	font-weight: 650;
	padding: var(--pl-space-3) clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account-notice--success {
	background: #effaf6;
	border-color: #b8e2d4;
	color: var(--pl-color-brand-strong);
}

.pl-account-methods {
	display: grid;
}

.pl-account-method {
	align-content: start;
	display: grid;
	min-width: 0;
	padding: clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account-method--primary {
	background: linear-gradient(160deg, #f8fcfb, var(--pl-color-brand-soft));
}

.pl-account-method h2 {
	font-size: var(--pl-font-size-xl);
	margin: var(--pl-space-3) 0 var(--pl-space-2);
}

.pl-account-method > p {
	color: var(--pl-color-muted);
}

.pl-account-method__badge {
	background: var(--pl-color-brand);
	border-radius: var(--pl-radius-pill);
	color: #ffffff;
	display: inline-flex;
	font-size: var(--pl-font-size-xs);
	font-weight: 800;
	justify-self: start;
	letter-spacing: 0.04em;
	padding: 0.35rem 0.65rem;
	text-transform: uppercase;
}

.pl-account-google-button {
	min-height: 44px;
	overflow: hidden;
	width: min(100%, 320px);
}

.pl-account-method .pl-account-method__fine-print {
	font-size: var(--pl-font-size-xs);
}

.pl-account-method .pl-account-method__fine-print {
	border-top: 1px solid rgb(15 118 110 / 0.18);
	margin: var(--pl-space-5) 0 0;
	padding-top: var(--pl-space-4);
}

.pl-account-method__fine-print a {
	display: inline-block;
	margin-left: var(--pl-space-1);
}

.pl-account-method .pl-account-method__unavailable {
	background: var(--pl-color-surface);
	border: 1px dashed var(--pl-color-border-strong);
	border-radius: var(--pl-radius-sm);
	font-size: var(--pl-font-size-sm);
	margin: 0;
	padding: var(--pl-space-3) var(--pl-space-4);
}

.pl-account-summary {
	display: grid;
	gap: var(--pl-space-6);
	padding: clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account-summary__identity {
	align-items: center;
	display: flex;
	gap: var(--pl-space-4);
	min-width: 0;
}

.pl-account-summary__identity h2,
.pl-account-summary__identity p {
	margin: 0;
	overflow-wrap: anywhere;
}

.pl-account-summary__identity p {
	color: var(--pl-color-muted);
	font-size: var(--pl-font-size-sm);
}

.pl-account-summary__initial {
	align-items: center;
	background: var(--pl-color-brand-soft);
	border: 1px solid #c9e5df;
	border-radius: var(--pl-radius-pill);
	color: var(--pl-color-brand-strong);
	display: inline-flex;
	flex: 0 0 3.25rem;
	font-size: var(--pl-font-size-xl);
	font-weight: 800;
	height: 3.25rem;
	justify-content: center;
}

.pl-account-summary__facts {
	display: grid;
	gap: var(--pl-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.pl-account-summary__facts > div {
	background: var(--pl-color-surface-muted);
	border-radius: var(--pl-radius-sm);
	padding: var(--pl-space-3) var(--pl-space-4);
}

.pl-account-summary__facts dt {
	color: var(--pl-color-muted);
	font-size: var(--pl-font-size-xs);
	font-weight: 750;
}

.pl-account-summary__facts dd {
	font-weight: 750;
	margin: var(--pl-space-1) 0 0;
}

.pl-account-summary__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-2);
	justify-self: start;
}

.pl-account-summary__actions .pl-button--secondary {
	background: var(--pl-color-surface);
	border-color: var(--pl-color-border-strong);
	color: var(--pl-color-muted);
}

.pl-account-summary__actions .pl-button--secondary:hover,
.pl-account-summary__actions .pl-button--secondary:focus-visible {
	background: var(--pl-color-brand-soft);
	border-color: var(--pl-color-border-strong);
	color: var(--pl-color-brand-strong);
}

.pl-account-profile {
	border-top: 1px solid var(--pl-color-border);
}

.pl-account-profile__header {
	background: var(--pl-color-surface-muted);
	border-bottom: 1px solid var(--pl-color-border);
	padding: clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account-profile__header h2 {
	font-size: var(--pl-font-size-xl);
	margin-bottom: var(--pl-space-2);
}

.pl-account-profile__header p:last-child {
	color: var(--pl-color-muted);
	font-size: var(--pl-font-size-sm);
	margin: 0;
	max-width: 42rem;
}

.pl-account-profile__form {
	display: grid;
	gap: var(--pl-space-5);
	padding: clamp(var(--pl-space-5), 5vw, var(--pl-space-8));
}

.pl-account-profile__form .pl-field,
.pl-account-profile__form .pl-field label {
	margin: 0;
}

.pl-account-profile__form .pl-field label {
	margin-bottom: var(--pl-space-2);
}

.pl-account-profile__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-3);
}

.pl-account-profile__actions span {
	color: var(--pl-color-muted);
	font-size: var(--pl-font-size-xs);
}

@media (min-width: 48rem) {
.pl-account-profile__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.pl-account-profile__wide {
		grid-column: 1 / -1;
	}
}

@media (max-width: 47.999rem) {
.pl-account-summary__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}