/* ==========================================================================
   Vote for Freya: the vote page's own details, loaded after the main site's freya.css (and account.css on the log in
   page) and the panel kit's panel.css. Everything else on these pages is the main site's own components under their
   real selectors (.fy-card, .fy-wait, .fy-steps, .fy-tip, .fy-kv, .fy-alert, .fy-account-auth ...). Only the main
   site's tokens are used here (colours, fonts, spacing, radii, shadows), so the parts match by construction.
   ========================================================================== */

/* The vote card ----------------------------------------------------------------- */
.fyv-top { align-items: start; }
.fyv-vote { display: flex; flex-direction: column; }
.fyv-vote .fy-card__head { margin-bottom: var(--sp-4); }
.fyv-vote__text { margin: 0 0 var(--sp-5); color: var(--text-2); }
.fyv-gold { color: var(--gold-200); font-weight: 800; }
.fyv-vote .fy-wait { margin: 0; }
.fyv-vote .fy-wait__next { margin-top: .55rem; }
.fyv-vote .fy-wait__next time { color: var(--text-2); }
.fyv-vote .fy-card__foot { justify-content: stretch; }
.fyv-vote__btn .fy-i--sm { width: 1rem; height: 1rem; opacity: .8; }
.fyv-vote__hint { display: flex; align-items: flex-start; gap: .5rem; margin: var(--sp-4) 0 0; color: var(--text-3); font-size: .88rem; line-height: 1.5; }
.fyv-vote__hint .fy-i { flex: none; margin-top: .15rem; color: var(--violet-300); }
.fyv-vote .fy-alert { margin: 0; }
.fyv-refusal [data-fyv-left] { font-variant-numeric: tabular-nums; }

/* The topsite's own banner beside the button (config.php's $vote_image_url): the same link, for the eye. */
.fyv-topsite { display: block; width: fit-content; max-width: 100%; margin: var(--sp-5) auto 0; border-radius: var(--r-sm); line-height: 0; }
.fyv-topsite img { display: block; max-width: 100%; height: auto; max-height: 90px; border-radius: var(--r-sm); }
.fyv-topsite.is-broken { display: none; }

/* The vote points beside the card ------------------------------------------------- */
.fyv-points .fy-card__head { margin-bottom: var(--sp-4); }
.fyv-points__label { margin: 0; color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fyv-points__value {
	margin: .2rem 0 var(--sp-5);
	background: var(--grad-text-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--gold-300);
	-webkit-text-fill-color: transparent;
	font: 600 clamp(2.4rem, 2rem + 1.6vw, 3.1rem)/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
@media (forced-colors: active) {
	.fyv-points__value { background: none; -webkit-text-fill-color: CanvasText; }
}

/* How voting works and the notes ----------------------------------------------------- */
.fyv-how { margin-top: var(--section-y); }
.fyv-how .fy-section-head { margin-bottom: var(--sp-10); }
.fyv-notes-card { margin-top: var(--sp-10); }
ul.fyv-notes { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
ul.fyv-notes li { display: flex; align-items: flex-start; gap: .75rem; margin: 0; color: var(--text-2); line-height: 1.5; }
ul.fyv-notes strong { color: var(--text); }
.fyv-notes__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 196, 63, .13); color: var(--gold-300); }
.fyv-notes__icon .fy-i { width: 1.05rem; height: 1.05rem; }
ul.fyv-notes li > span:last-child { padding-top: .35rem; }
.fyv-notes__about { margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--text-3); font-size: .94rem; }

/* "Before you vote" in the log in card: the main site's dashed tip line (.fy-tip), fitted to the card's width. */
.fy-tip.fyv-before { flex-wrap: nowrap; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); }
.fyv-before .fy-tip__icon { flex: none; width: 34px; height: 34px; border-radius: 11px; }
.fyv-before p { flex: 1 1 auto; min-width: 0; font-size: .88rem; line-height: 1.5; }
.fyv-before p strong { color: var(--text); }

/* The connection screening's refusal (an alert with the address facts and the steps that help) */
.fyv-screen .fy-kv { margin: .6rem 0; }
.fyv-screen .fy-kv dd { font-family: var(--font-mono); font-size: .9rem; font-weight: 600; }
.fyv-screen ul { margin: .35rem 0 .6rem; padding-left: 1.2rem; }
.fyv-screen li { margin: .2rem 0; }
.fyv-screen p { margin: .45rem 0 0; }

@media (max-width: 559.98px) {
	.fyv-vote .fy-card__head { gap: var(--sp-2); }
}