/*
 * Member login and dashboard (spec P16, P17).
 *
 * Loaded only on the account pages.
 */

.aop-account__hello {
	margin: 0 0 18px;
	font-size: .92rem;
	color: var(--global-palette5, #5A6672);
}

.aop-account__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--global-palette6, #D9D5CC);
}

.aop-account__tab {
	padding: 9px 16px;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
}

.aop-account__tab:hover,
.aop-account__tab:focus-visible {
	background: var(--global-palette7, #F7F5F0);
}

.aop-account__tab.is-current {
	color: #fff;
	background: var(--global-palette1, #0B5D4A);
}

.aop-account__panel h2 {
	margin: 0 0 16px;
	font-size: 1.3rem;
}

.aop-account__panel h3 {
	margin: 28px 0 10px;
	font-size: 1.05rem;
}

.aop-account__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aop-account__list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--global-palette6, #D9D5CC);
}

.aop-account__when {
	display: block;
	font-size: .82rem;
	color: var(--global-palette5, #5A6672);
}

/* A referral URL is copied by hand, so it wraps rather than overflowing and is
   set in a face where a hyphen and an underscore are told apart. */
.aop-account__link {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .88rem;
	word-break: break-all;
}

.aop-account__actions {
	margin: 20px 0 0;
}

/* The membership card. The "visiting card" motif from the sketch, reused. */
.aop-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 420px;
	padding: 26px 28px;
	color: #fff;
	background: linear-gradient(135deg, #0B5D4A 0%, #084535 100%);
	border-radius: var(--aop-radius, 12px);
	box-shadow: var(--aop-shadow-md, 0 6px 24px rgba(0, 0, 0, .10));
}

.aop-card__org {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.aop-card__sub {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

.aop-card__name {
	margin-top: 18px;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.aop-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 16px 0 0;
}

.aop-card__meta dt {
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
}

.aop-card__meta dd {
	margin: 2px 0 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Printing the card should produce the card, not the whole website. Everything
   outside it is hidden and the gradient is forced to print, since browsers drop
   background colours by default and would otherwise emit white on white. */
@media print {

	body * {
		visibility: hidden;
	}

	.aop-card,
	.aop-card * {
		visibility: visible;
	}

	.aop-card {
		position: absolute;
		top: 0;
		left: 0;
		box-shadow: none;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}