/* The account page: one card per tenant, read top to bottom — the state, a line about it,
   then the plans as a column of wide buttons. Drawn in the site's tokens alone. */

.tenant-account + .tenant-account {
	margin-top: 1.5rem;
}

.tenant-account h2 {
	margin-bottom: 1rem;
}

.tenant-account .notice {
	margin-bottom: 1.25rem;
}

.tenant-account .lede {
	margin: 0 0 1.5rem;
}

.tenant-account .plan {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.tenant-account .plan-price {
	color: var(--muted);
	font-weight: 400;
}

.tenant-account .plan:hover .plan-price {
	color: inherit;
}

.tenant-account .plan.is-current {
	border-color: var(--accent);
}

.tenant-account .tenant-cancel {
	margin-top: 1.5rem;
	justify-content: flex-end;
}

.tenant-account .status.error {
	color: var(--bad);
}

/* What the plan bounds and how much of it is used: one line per meter. */
.usage {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--line);
}

.usage li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.95rem;
}

.usage li.is-full {
	color: var(--bad);
}

.usage-figure {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* The pricing page: the plans side by side, the figure large, the features as a list. */
.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.plan-card {
	display: flex;
	flex-direction: column;
}

.plan-card .plan-desc {
	color: var(--muted);
	margin: 0 0 1rem;
}

.plan-figure {
	margin: 0 0 0.25rem;
}

.plan-amount {
	font-size: 2rem;
	font-weight: 700;
}

.plan-per, .plan-yearly-note, .plan-was {
	color: var(--muted);
}

.plan-was {
	margin-left: 0.6rem;
	text-decoration-color: var(--bad);
}

.plan-yearly-note {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.plan-features {
	margin: 1rem 0 1.5rem;
	padding-left: 1.2rem;
	flex: 1;
}

.plan-features li {
	margin: 0.35rem 0;
}