/**
 * The tier table, under the price on an event's page.
 *
 * A table and not a list, because the four things on each row — what the tier
 * is called, when it runs, what it costs, where it stands today — line up and
 * are read down a column. The active row is the only one that gets weight:
 * everything else is there to say "this is what it costs instead, and when".
 *
 * Colours come from the active theme's custom properties with fallbacks close
 * to them, as everywhere else this plugin renders on the front end.
 */

.fr-fasce {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.4;
}

.fr-fasce__caption {
	margin-bottom: 8px;
	text-align: left;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--fr-muted, #5a5a55);
}

.fr-fasce__row > * {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--fr-line, #e2e2df);
	text-align: left;
	vertical-align: baseline;
	font-weight: 400;
	color: var(--fr-ink, #1b1b1b);
}

.fr-fasce__row > *:last-child {
	padding-right: 0;
	text-align: right;
}

.fr-fasce__name {
	font-weight: 600;
}

.fr-fasce__when,
.fr-fasce__state {
	color: var(--fr-muted, #5a5a55);
}

.fr-fasce__price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The row being charged today. It is the answer to the question the table was
   opened to ask, so it is the only one that carries any colour. */
.fr-fasce__row--active > * {
	color: var(--fr-green, #693);
	font-weight: 600;
	background: var(--fr-sage, #f2f5ee);
}

.fr-fasce__row--active > *:first-child {
	border-radius: 8px 0 0 8px;
	padding-left: 12px;
}

.fr-fasce__row--active > *:last-child {
	border-radius: 0 8px 8px 0;
	padding-right: 12px;
}

/* A window that has already shut is still worth printing — it is what makes
   today's price read as the better one — but it is not an offer any more. */
.fr-fasce__row--closed > * {
	opacity: 0.55;
}

.fr-fasce__row--closed .fr-fasce__price {
	text-decoration: line-through;
}

/* Reserved for members: visible on purpose. A price somebody cannot have
   today is the only argument for joining that costs nothing to make. */
.fr-fasce__row--locked .fr-fasce__state {
	color: var(--fr-navy, #036);
}