/*
 * Shared front-end component rules: the pieces that used to be copy-pasted
 * between module stylesheets (spinner, zebra table, accent action button,
 * RSVP-status pill), centralised by GROUPING the existing per-module
 * selectors. Class names in markup are frozen for now, so each component is
 * one rule with several selectors; a future prefix unification collapses
 * each group to a single class.
 *
 * Loads as the fair-components handle (depends on fair-tokens), BEFORE every
 * module stylesheet, so modules can still override per-module details.
 */

/* ---- Busy spinner ----------------------------------------------------------
 * One keyframes + one box recipe for every inline "working" indicator:
 * the login submit (a real element, login.js inserts it), and the RSVP /
 * redeem submit ::before pseudo-elements.
 */

@keyframes fm-spin {
	to {
		transform: rotate( 360deg );
	}
}

.fm-login-spinner,
.fm-rsvp-modal__busy .fm-rsvp-modal__submit::before,
.redeem-form__submit--busy::before {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.5em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: fm-spin 0.6s linear infinite;
}

.fm-rsvp-modal__busy .fm-rsvp-modal__submit::before,
.redeem-form__submit--busy::before {
	content: '';
}

/* The login spinner sits beside an <input> label and reads better a touch larger. */
.fm-login-spinner {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
}

/* ---- Zebra table ------------------------------------------------------------
 * Solid black header, no cell borders, alternating rows. Used by the
 * nominations and exhibitor portal tables. vertical-align differs per module
 * (nominations centres, exhibitors tops) and stays in the module files.
 */

.ff-nominations .ff-table,
.ff-exhibitor .ff-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --fm-text-base );
}

.ff-nominations .ff-table th,
.ff-nominations .ff-table td,
.ff-exhibitor .ff-table th,
.ff-exhibitor .ff-table td {
	text-align: left;
	padding: var( --fm-space-3 ) var( --fm-space-4 );
	border: 0;
}

.ff-nominations .ff-table thead th,
.ff-exhibitor .ff-table thead th {
	/* Neutral default; the theme re-skins this (brand is solid black). */
	background: var( --fm-color-dark );
	color: #ffffff;
	font-family: var( --fm-font-heading ) !important;
	font-size: var( --fm-text-btn );
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Zebra rows, on their own --fm-color-row-alt token. (The original value was
   rgba(255,255,255,0.1) -- a white wash written for a dark ground, which on the
   white content column resolved to no stripe at all.) */
.ff-nominations .ff-table tbody tr:nth-child( even ),
.ff-exhibitor .ff-table tbody tr:nth-child( even ) {
	background-color: var( --fm-color-row-alt );
}

/* ---- Accent action button ----------------------------------------------------
 * The brand primary action: the accent face, uppercase, square, on an accent
 * fill -- all three from tokens, so the theme owns the brand. The RSVP modal
 * submit keeps its own !important variant in rsvp/rsvp.css (it has to defeat
 * the theme's global button styling).
 */

/* Both of these are the shared portal action button, whose whole skin -- fill,
   label colour, face, casing, height and hover -- lives in ONE rule in
   portal.css. This block used to restate it and had drifted: uppercase where the
   shared button is not, and a hover that swapped the ground to --fm-color-accent-
   hover while leaving the label --fm-color-ink. A brand is free to point those at
   the same colour, and this one does, so the button went brown-on-brown and
   vanished under the cursor. Nothing skin-related belongs here. */

/* ---- RSVP status pill ---------------------------------------------------------
 * The viewer's own status on a program tile, bottom-LEFT, diagonally opposite the
 * category badges at the top right (program.css). Tile-only: [my-rsvps] is a list,
 * and styles its status as plain text in the row (rsvp/rsvp.css).
 */

#content .program-tile__rsvp {
	position: absolute;
	bottom: var( --fm-space-3 );
	left: var( --fm-space-3 );
	z-index: 2;
	padding: 3px 9px;
	border-radius: var( --fm-radius );
	/* Deliberately identical type to the category badge opposite it (program.css):
	 * the two sit on one line of sight across the tile, so a different weight or
	 * casing reads as a mistake rather than a distinction. Only the FILL separates
	 * them -- this one keeps the accent, the category badge takes the dark ground. */
	font-family: var( --fm-font-body );
	font-size: var( --fm-text-badge );
	font-weight: 500;
	letter-spacing: 0.005em;
	text-transform: none;
	color: var( --fm-color-ink );
	background: #ffffff;
	border: 1px solid var( --fm-color-border );
}

#content .program-tile__rsvp--attending {
	background: var( --fm-color-accent );
	border-color: var( --fm-color-accent );
	/* On an accent fill the label follows the palette's on-accent rule. */
	color: var( --fm-color-on-accent );
}

#content .program-tile__rsvp--waitlist {
	background: var( --fm-color-waitlist-bg );
	border-color: var( --fm-color-waitlist-border );
}