/* ============================================================
   NiCok Membership — public (member-page) styles.
   Design language ported from the platform mockup
   (mockups/index.html): indigo->magenta palette, Sora/Inter type,
   soft purple shadows, rounded cards, teal Rookie / purple Challenger.

   Sora/Inter are named first in the font stacks so the exact
   typography is used wherever the fonts load, falling back to
   system fonts otherwise. Everything is scoped under .nfcm-public
   to avoid colliding with the active theme.
   ============================================================ */
:root {

	/* Ink & surfaces */
	--nfcm-ink: #1a1130;
	--nfcm-ink-soft: #4a4360;
	--nfcm-muted: #8a83a3;
	--nfcm-line: #ece8f5;
	--nfcm-bg: #f6f3fc;
	--nfcm-card-bg: #fff;

	/* Brand */
	--nfcm-indigo: #6d28d9;
	--nfcm-violet: #8b5cf6;
	--nfcm-magenta: #ec4899;
	--nfcm-teal: #14b8a6;
	--nfcm-teal2: #2dd4bf;
	--nfcm-lime: #a3e635;
	--nfcm-gold: #fbbf24;

	/* Gradients */
	--nfcm-grad: linear-gradient(120deg, #6d28d9 0%, #a21caf 55%, #ec4899 100%);
	--nfcm-grad-soft: linear-gradient(120deg, #f5f0ff 0%, #fdeef8 100%);
	--nfcm-grad-teal: linear-gradient(120deg, #0d9488 0%, #2dd4bf 100%);

	/* Shape & depth */
	--nfcm-radius: 18px;
	--nfcm-radius-sm: 12px;
	--nfcm-shadow: 0 10px 30px -12px rgba(80, 30, 120, 0.28);
	--nfcm-shadow-lg: 0 24px 60px -20px rgba(80, 30, 120, 0.45);

	/* Type */
	--nfcm-display: "Sora", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--nfcm-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;

	/* Shared page frame; matches the mockup's ~1128px content area. */
	--nfcm-page-w: 1100px;
}

/* One frame for every member page. Per-page widths used to range from 680px
   (notifications) to 1100px (dashboard) and were left-aligned, so moving
   between pages visibly jumped. The mockup instead keeps one wide frame and
   constrains individual content blocks inside it — see .nfcm-notifs /
   .nfcm-account below.

   The doubled class is deliberate. Block themes cap direct children of the
   content area via `.is-layout-constrained > :where(...)`, which has the same
   specificity as a single class but is injected inline in <head> — i.e. after
   this stylesheet — so it would otherwise win and clamp every member page to
   the theme's contentSize (645px on the default theme). The member area is one
   app-like surface and has to look the same on any theme.

   `min(…, 100%)` keeps that override safe: it lifts the theme's artificial cap
   without ever exceeding the real container, so a narrower layout (a Divi page
   with a sidebar) still just fills the space it has rather than overflowing. */
.nfcm-public.nfcm-public {
	margin: 1.5rem auto;
	max-width: min(var(--nfcm-page-w), 100%);
	font-family: var(--nfcm-body);
	color: var(--nfcm-ink);
	line-height: 1.5;
}

/* Themes reset every heading with an element-only selector — Divi ships
   `h1..h6 { color:#333; line-height:1em; padding-bottom:10px }`. An element
   selector beats an *inherited* value outright, because inheritance carries no
   specificity at all, so a heading on one of the gradient surfaces below
   (.nfcm-tourn, .nfcm-auth__art) rendered near-black on purple however emphatic
   the `color:#fff` on its container was. The stray 10px is the same bug wearing
   a different hat: it silently grows any block measured off a heading, which is
   what pushed the profile name up into its cover band.

   `color: inherit` rather than a literal, so a heading always takes the colour
   of the surface it sits on and there is nothing to keep in sync when a new one
   is added. `.nfcm-public :is(h1..h6)` is 0-1-1 against Divi's 0-0-1, so this
   needs no !important — this file still has none. */
.nfcm-public :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	line-height: 1.25;
	padding-bottom: 0;
}

.nfcm-public--notice {
	padding: 14px 16px;
	border-radius: var(--nfcm-radius-sm);
	background: var(--nfcm-bg);
	color: var(--nfcm-ink-soft);
}

/* ---------- Buttons ---------- */
.nfcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--nfcm-radius-sm);
	font-weight: 600;
	font-size: 14px;
	font-family: var(--nfcm-body);
	/* Pin the leading, or an <a class="nfcm-btn"> inherits the theme's body
	   line-height while a <button> gets the UA's `normal` — under Divi that
	   makes a link-button 7px taller than the button beside it. */
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
	border: none;
}

.nfcm-btn--block {
	width: 100%;
}

.nfcm-btn--teal {
	background: var(--nfcm-grad-teal);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(13, 148, 136, 0.7);
}

.nfcm-btn--light {
	background: #fff;
	color: var(--nfcm-indigo);
}

.nfcm-btn--teal:hover,
.nfcm-btn--light:hover {
	transform: translateY(-2px);
	box-shadow: var(--nfcm-shadow-lg);
}

/* ---------- Pricing ---------- */
.nfcm-pricing__head {
	text-align: center;
	margin-bottom: 24px;
}

.nfcm-pricing__title {
	font-family: var(--nfcm-display);
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--nfcm-ink);
}

.nfcm-pricing__sub {
	color: var(--nfcm-muted);
	margin: 0;
}

.nfcm-plans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 640px) {

	.nfcm-plans {
		grid-template-columns: 1fr;
	}
}

.nfcm-plan {
	position: relative;
	overflow: hidden;
	padding: 26px;
	border-radius: 20px;
	background: #fff;
	border: 1.5px solid var(--nfcm-line);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nfcm-plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--nfcm-shadow-lg);
}

.nfcm-plan--free {
	border-top: 5px solid var(--nfcm-teal);
}

.nfcm-plan--pro {
	color: #fff;
	background: var(--nfcm-grad);
	border: none;
	box-shadow: var(--nfcm-shadow-lg);
}

.nfcm-plan__ribbon {
	position: absolute;
	top: 16px;
	right: -34px;
	transform: rotate(40deg);
	background: var(--nfcm-gold);
	color: #5b3a00;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 5px 40px;
	font-family: var(--nfcm-display);
}

.nfcm-plan__name {
	font-family: var(--nfcm-display);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.nfcm-plan--free .nfcm-plan__name {
	color: var(--nfcm-teal);
}

.nfcm-plan__price {
	font-family: var(--nfcm-display);
	font-size: 40px;
	font-weight: 800;
	margin: 6px 0;
	line-height: 1.1;
}

.nfcm-plan__price small {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.75;
}

.nfcm-plan__desc {
	font-size: 13px;
	margin: 0 0 4px;
	color: var(--nfcm-muted);
}

.nfcm-plan--pro .nfcm-plan__desc {
	color: #f0e6ff;
}

.nfcm-plan__feat {
	list-style: none;
	padding: 0;
	margin: 18px 0 22px;
	font-size: 13.5px;
}

.nfcm-plan__feat li {
	padding: 7px 0;
	display: flex;
	gap: 9px;
	align-items: flex-start;
}

.nfcm-plan--pro .nfcm-plan__feat li {
	color: #f0e6ff;
}

.nfcm-plan__ck {
	color: var(--nfcm-teal);
	font-weight: 800;
}

.nfcm-plan--pro .nfcm-plan__ck {
	color: var(--nfcm-lime);
}

.nfcm-pricing__login {
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
	color: var(--nfcm-muted);
}

.nfcm-pricing__login a {
	color: var(--nfcm-indigo);
	font-weight: 600;
}

/* ---------- Gradient button + pills ---------- */
.nfcm-btn--grad {
	background: var(--nfcm-grad);
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(162, 28, 175, 0.7);
}

.nfcm-btn--grad:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -10px rgba(162, 28, 175, 0.85);
}

.nfcm-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	font-family: var(--nfcm-body);
}

.nfcm-pill--free {
	background: #dcfce7;
	color: #15803d;
}

.nfcm-pill--pro {
	background: linear-gradient(120deg, #ede9fe, #fce7f3);
	color: #a21caf;
}

/* ---------- Auth (login / signup / forgot) ---------- */
.nfcm-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 860px;
	margin-inline: auto;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--nfcm-shadow-lg);
	background: #fff;
}

.nfcm-auth--single {
	grid-template-columns: 1fr;
	max-width: 460px;
}

@media (max-width: 720px) {

	.nfcm-auth {
		grid-template-columns: 1fr;
	}

	.nfcm-auth__art {
		display: none;
	}
}

.nfcm-auth__art {
	background: var(--nfcm-grad);
	color: #fff;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.nfcm-auth__brand {
	font-family: var(--nfcm-display);
	font-weight: 800;
	margin-bottom: 12px;
}

.nfcm-auth__headline {
	font-family: var(--nfcm-display);
	font-size: 26px;
	font-weight: 800;
	margin: 0;
}

.nfcm-auth__art p {
	color: #f1e6ff;
	margin: 0;
	max-width: 320px;
}

.nfcm-auth__form {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nfcm-auth--single .nfcm-auth__form {
	text-align: center;
}

.nfcm-auth__title {
	font-family: var(--nfcm-display);
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 16px;
}

.nfcm-auth__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.nfcm-auth__head .nfcm-auth__title {
	margin: 0;
}

.nfcm-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 16px;
	font-size: 13px;
}

.nfcm-auth__row a {
	color: var(--nfcm-indigo);
	font-weight: 600;
}

.nfcm-auth__row2 {
	display: flex;
	gap: 12px;
}

.nfcm-auth__row2 .nfcm-field {
	flex: 1;
}

.nfcm-auth__alt {
	text-align: center;
	font-size: 13px;
	color: var(--nfcm-muted);
	margin-top: 16px;
}

.nfcm-auth__alt a {
	color: var(--nfcm-indigo);
	font-weight: 600;
}

.nfcm-auth__muted {
	color: var(--nfcm-muted);
	font-size: 13.5px;
	margin: 0 0 16px;
}

.nfcm-auth__icon {
	font-size: 40px;
	text-align: center;
}

.nfcm-check {
	color: var(--nfcm-ink-soft);
}

/* ---------- Fields ---------- */
/* stylelint-disable-next-line no-descending-specificity */
.nfcm-field {
	margin-bottom: 14px;
	text-align: left;
}

.nfcm-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nfcm-ink-soft);
	margin-bottom: 6px;
}

.nfcm-field input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--nfcm-line);
	border-radius: 11px;
	font-size: 14px;
	font-family: var(--nfcm-body);
	background: #fff;
	box-sizing: border-box;
}

.nfcm-field input:focus {
	outline: none;
	border-color: var(--nfcm-violet);
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

/* ---------- Password reveal ---------- */
.nfcm-pw {
	position: relative;
}

/* Room for the eye so long passwords never run under it. */
/* stylelint-disable-next-line no-descending-specificity */
.nfcm-pw input {
	padding-right: 46px;
}

.nfcm-pw__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--nfcm-ink-soft);
	cursor: pointer;
	line-height: 1;

	/* Divi styles every button on the page; this keeps the eye a bare icon. */
	box-shadow: none;
}

.nfcm-pw__toggle:hover {
	background: rgba(139, 92, 246, 0.1);
	color: var(--nfcm-violet);
}

.nfcm-pw__toggle:focus-visible {
	outline: 2px solid var(--nfcm-violet);
	outline-offset: 1px;
}

.nfcm-pw__toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* One icon at a time: eye = "reveal", struck-through eye = "hide again". */
.nfcm-pw__toggle .nfcm-pw__eye-off,
.nfcm-pw__toggle[aria-pressed="true"] .nfcm-pw__eye {
	display: none;
}

.nfcm-pw__toggle[aria-pressed="true"] .nfcm-pw__eye-off {
	display: block;
}

/* ---------- Alerts ---------- */
.nfcm-alert {
	padding: 11px 14px;
	border-radius: 11px;
	font-size: 13.5px;
	margin-bottom: 14px;
}

.nfcm-alert--error {
	background: #fee2e2;
	color: #b91c1c;
}

.nfcm-alert--ok {
	background: #dcfce7;
	color: #15803d;
}

/* Something needs the member's attention but nothing broke — a task sent back
   for another go, or a submission they can fix and retry. Amber rather than the
   red of --error: being asked to retake a photo is not an error. */
.nfcm-alert--warn {
	background: #fef3c7;
	color: #92400e;
}

/* ---------- Signup plan picker ---------- */
.nfcm-plan-pick {
	display: grid;
	gap: 12px;
}

.nfcm-plan-pick__card {
	display: block;
	padding: 16px;
	border-radius: var(--nfcm-radius-sm);
	border: 2px solid var(--nfcm-line);
	text-decoration: none;
	color: var(--nfcm-ink);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.nfcm-plan-pick__card:hover {
	transform: translateY(-2px);
}

.nfcm-plan-pick__card.is-free:hover {
	border-color: var(--nfcm-teal);
}

.nfcm-plan-pick__card.is-pro:hover {
	border-color: var(--nfcm-indigo);
}

.nfcm-plan-pick__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--nfcm-display);
}

.nfcm-plan-pick__desc {
	display: block;
	color: var(--nfcm-muted);
	font-size: 12.5px;
	margin-top: 6px;
}

/* ---------- Onboarding ---------- */
.nfcm-onboarding {
	max-width: 560px;
	margin: 1.5rem auto;
	text-align: center;
}

.nfcm-onboarding__hero {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--nfcm-grad-soft);
	display: grid;
	place-items: center;
	font-size: 34px;
	margin: 0 auto 16px;
}

.nfcm-onboarding__title {
	font-family: var(--nfcm-display);
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 6px;
}

.nfcm-onboarding__sub {
	color: var(--nfcm-muted);
	margin: 0 0 20px;
}

.nfcm-onboarding__card {
	text-align: left;
	background: #fff;
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius);
	box-shadow: var(--nfcm-shadow);
	padding: 20px;
	margin-bottom: 22px;
}

.nfcm-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.nfcm-checklist li {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--nfcm-line);
}

.nfcm-checklist li:last-child {
	border-bottom: none;
}

.nfcm-checklist__c {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	color: var(--nfcm-muted);
	background: #e9e3f7;
	flex: none;
}

.nfcm-checklist li.is-done .nfcm-checklist__c {
	background: var(--nfcm-grad-teal);
	color: #fff;
}

/* ---------- Cards / tags / status pills ---------- */
.nfcm-card {
	background: #fff;
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius);
	box-shadow: var(--nfcm-shadow);
	padding: 20px;
	margin-bottom: 16px;
}

.nfcm-tag {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nfcm-muted);
	font-weight: 700;
}

.nfcm-status {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f1f1f1;
	color: #646970;
}

.nfcm-status--active {
	background: #dcfce7;
	color: #15803d;
}

.nfcm-status--pending {
	background: #e0f2fe;
	color: #0369a1;
}

.nfcm-status--past_due,
.nfcm-status--failed {
	background: #fee2e2;
	color: #dc2626;
}

.nfcm-status--cancelled {
	background: #fef3c7;
	color: #b45309;
}

/* Email verification. Green matches --active: both mean "this is settled".
   The unverified pill is amber rather than red — an unverified address is a
   nudge, not a failure, and nothing is blocked by it. */
.nfcm-status--verified {
	background: #dcfce7;
	color: #15803d;
}

.nfcm-status--unverified {
	background: #fef3c7;
	color: #b45309;
}

/* ---------- Verify-email banner ---------- */

/* Prepended to every member page, so it has to sit above the page's own
   heading without inheriting whatever margin that page starts with. */
.nfcm-verify-banner {
	margin-bottom: 14px;
}

.nfcm-verify-banner__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* flex-wrap rather than a media query, matching the rest of this
	   stylesheet: the button drops under the text when there is no room. */
	flex-wrap: wrap;
}

.nfcm-verify-banner__text {
	flex: 1 1 260px;
}

.nfcm-verify-banner__form {
	margin: 0;
	flex: 0 0 auto;
}

/* The email block on the account page, and the small forms under it. */
.nfcm-account__email {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	font-weight: 600;
	/* An address is long and unbreakable; without this it widens the card. */
	overflow-wrap: anywhere;
}

.nfcm-account__inline {
	margin: 0 0 12px;
}

/* The onboarding checklist's verify step, which is now actionable. */
.nfcm-checklist__action {
	display: inline;
	margin: 0 0 0 10px;
}

.nfcm-checklist__note {
	margin-left: 10px;
	font-size: 12px;
	color: #15803d;
}

/* ---------- Account ---------- */

/* Forms and receipts read badly at the full frame width, so the content column
   — not the page — is what stays narrow, centered inside the shared frame. */
.nfcm-account > *,
.nfcm-billing > * {
	max-width: 760px;
	margin-inline: auto;

	/* border-box so a padded child (.nfcm-card) measures the same as an
	   unpadded one and the column edges line up. */
	box-sizing: border-box;
}

.nfcm-account__head {
	margin-bottom: 16px;
}

.nfcm-account__head h2 {
	font-family: var(--nfcm-display);
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.nfcm-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.nfcm-tab {
	padding: 8px 14px;
	border-radius: var(--nfcm-radius-sm);
	border: 1.5px solid #e3d8fb;
	color: var(--nfcm-indigo);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
}

.nfcm-tab.is-active {
	background: var(--nfcm-grad);
	color: #fff;
	border-color: transparent;
}

.nfcm-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.nfcm-sub__plan {
	font-family: var(--nfcm-display);
	font-size: 20px;
	margin: 4px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.nfcm-sub__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.nfcm-btn--danger {
	background: #fff;
	color: #ef4444;
	border: 1.5px solid #f8c7c7;
}

.nfcm-btn--danger:hover {
	background: #fee2e2;
}

/* ---------- Billing ---------- */
.nfcm-billing__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.nfcm-billing__cards h3 {
	font-family: var(--nfcm-display);
	font-size: 19px;
	margin: 4px 0;
}

@media (max-width: 640px) {

	.nfcm-billing__cards {
		grid-template-columns: 1fr;
	}
}

.nfcm-billing__title {
	font-family: var(--nfcm-display);
	font-size: 17px;
	margin: 0 0 12px;
}

.nfcm-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border-radius: var(--nfcm-radius);
	margin-bottom: 16px;
}

.nfcm-banner--warn {
	background: #fff7ed;
	border: 1px solid #fed7aa;
}

.nfcm-banner b {
	color: #b45309;
}

.nfcm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.nfcm-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nfcm-muted);
	padding: 10px 12px;
	border-bottom: 2px solid var(--nfcm-line);
}

.nfcm-table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--nfcm-line);
}

.nfcm-btn--sm {
	padding: 8px 14px;
	font-size: 13px;
}

/* ---------- Dashboard ---------- */
.nfcm-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.nfcm-dash__head h2 {
	font-family: var(--nfcm-display);
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.nfcm-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 18px;
}

@media (max-width: 720px) {

	.nfcm-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
}

.nfcm-kpi {
	border-radius: 16px;
	padding: 18px;
	color: #fff;
	box-shadow: var(--nfcm-shadow);
}

.nfcm-kpi--0 {
	background: linear-gradient(135deg, #6d28d9, #a855f7);
}

.nfcm-kpi--1 {
	background: linear-gradient(135deg, #0d9488, #2dd4bf);
}

.nfcm-kpi--2 {
	background: linear-gradient(135deg, #db2777, #f472b6);
}

.nfcm-kpi--3 {
	background: linear-gradient(135deg, #d97706, #fbbf24);
}

.nfcm-kpi__ic {
	font-size: 20px;
	opacity: 0.9;
}

.nfcm-kpi__num {
	font-family: var(--nfcm-display);
	font-size: 32px;
	font-weight: 800;
	margin: 6px 0 2px;
	line-height: 1;
}

.nfcm-kpi__lab {
	font-size: 12px;
	opacity: 0.92;
}

.nfcm-dash__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 16px;
	align-items: start;
}

@media (max-width: 860px) {

	.nfcm-dash__grid {
		grid-template-columns: 1fr;
	}
}

.nfcm-dash__main,
.nfcm-dash__side {
	display: grid;
	gap: 16px;
}

.nfcm-tourn {
	background: var(--nfcm-grad);
	color: #fff;
	border: none;
}

.nfcm-tourn h4 {
	font-family: var(--nfcm-display);
	font-size: 16px;
	margin: 8px 0 12px;
}

.nfcm-tourn__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Translucent white rather than a solid fill, so the gradient still reads
   through and the rows stay part of one card instead of looking like white
   cards that happen to sit on a purple one. */
.nfcm-tourn__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: rgb(255 255 255 / 14%);
	border-radius: var(--nfcm-radius-sm);
}

.nfcm-tourn__name {
	font-family: var(--nfcm-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.nfcm-sect-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
}

.nfcm-sect-h h3 {
	font-family: var(--nfcm-display);
	font-size: 16px;
	margin: 0;
}

.nfcm-viewall {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nfcm-indigo, #6d28d9);
	text-decoration: none;
	white-space: nowrap;
}

.nfcm-viewall:hover {
	text-decoration: underline;
}

/* The card's own View all. .nfcm-viewall is --nfcm-indigo, which on this
   gradient is all but invisible — this is legibility, not decoration. The <h3>
   beside it needs nothing: `.nfcm-public :is(h1..h6) { color: inherit }` at the
   top of this file already exists because Divi's element-only heading colour
   beat the inherited white here. */
.nfcm-tourn .nfcm-viewall {
	color: #f0e6ff;
}

.nfcm-upcoming {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.nfcm-upcoming__item {
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius-sm);
	padding: 14px;
}

.nfcm-upcoming__item h4 {
	font-family: var(--nfcm-display);
	font-size: 15px;
	margin: 0 0 10px;
}

/* "Registered" pill, shown in place of the Register CTA for a tournament the
   member has already joined. Matches the h4's bottom margin so the button below
   sits where it always did. */
.nfcm-upcoming__joined {
	margin: 0 0 10px;
}

.nfcm-ad-slot {
	border: 2px dashed #cdbff0;
	border-radius: 14px;
	min-height: 96px;
	display: grid;
	place-items: center;
	color: var(--nfcm-muted);
	font-size: 12px;
	background: #faf8ff;
}

.nfcm-cta {
	background: var(--nfcm-grad-soft);
	border: none;
}

/* ---------- Confetti ---------- */
.nfcm-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
}

.nfcm-confetti i {
	position: absolute;
	top: -20px;
	width: 9px;
	height: 14px;
	border-radius: 2px;
	animation: nfcm-drop linear forwards;
}

@keyframes nfcm-drop {

	to {
		transform: translateY(640px) rotate(540deg);
		opacity: 0.2;
	}
}

/* ---------- Avatar ---------- */
.nfcm-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--nfcm-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--nfcm-display);
	font-weight: 700;
	font-size: 24px;
	flex: none;
}

/* ---------- Dashboard bell ---------- */
.nfcm-dash__right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nfcm-bell {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--nfcm-grad-soft);
	display: grid;
	place-items: center;
	font-size: 17px;
	text-decoration: none;
}

.nfcm-bell__dot {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--nfcm-magenta);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #fff;

	/* "9+" is two glyphs in a pill sized for one; keep it on one line. */
	line-height: 1;
	white-space: nowrap;
}

/* ---------- Public profile ---------- */
.nfcm-profile__head {
	padding: 0;
	overflow: hidden;
}

.nfcm-profile__cover {
	height: 96px;
	background: var(--nfcm-grad);
}

.nfcm-profile__id {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding: 0 24px 22px;
}

/* Only the avatar straddles the cover. Lifting the whole row instead made the
   name's position a function of how tall this block happened to be, so under a
   theme that pads its headings — or with a display name long enough to wrap —
   the <h2> rode up across the gradient's bottom edge and became unreadable.
   Hung off a negative margin so the flex line still starts at the cover's
   bottom edge: the avatar's margin box shrinks to 68px and is what gets
   bottom-aligned, while its border box overflows upward by exactly this much.
   Card height is unchanged; the text simply can no longer reach the gradient. */
.nfcm-profile__id .nfcm-avatar {
	width: 96px;
	height: 96px;
	font-size: 34px;
	border: 4px solid #fff;
	margin-top: -36px;
}

.nfcm-profile__meta {
	padding-bottom: 6px;
}

/* .nfcm-auth__muted is borrowed from the auth pages, where its bottom margin
   separates form blocks. Here it only pads the identity block out. */
.nfcm-profile__meta .nfcm-auth__muted {
	margin-bottom: 0;
}

.nfcm-profile__meta h2 {
	font-family: var(--nfcm-display);
	font-size: 24px;
	margin: 0;
}

.nfcm-profile__rank {
	margin-left: auto;
	text-align: center;
	padding-bottom: 6px;
}

.nfcm-profile__rank-num {
	font-family: var(--nfcm-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--nfcm-indigo);
}

.nfcm-profile__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 16px;
	align-items: start;
}

@media (max-width: 720px) {

	.nfcm-profile__grid {
		grid-template-columns: 1fr;
	}
}

.nfcm-profile__stats {
	margin-top: 18px;
}

.nfcm-profile__progress {
	text-align: center;
}

/* ---------- Badges ---------- */
.nfcm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nfcm-badge {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 22px;
	background: var(--nfcm-grad-soft);
	border: 1.5px solid var(--nfcm-line);
}

.nfcm-badge.is-locked {
	filter: grayscale(1);
	opacity: 0.45;
}

/* ---------- Level ring ---------- */
.nfcm-ring {
	--nfcm-p: 0;

	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 6px auto;
	display: grid;
	place-items: center;
	background: conic-gradient(#ec4899 calc(var(--nfcm-p) * 1%), #eee 0);
}

.nfcm-ring i {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	font-family: var(--nfcm-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--nfcm-indigo);
	font-style: normal;
}

/* ---------- Task speed ---------- */

/* Banded rather than a bare duration: the underlying number is a response time,
   where lower is better, which reads backwards next to every other stat on the
   profile. The band says "Fast"; the caption underneath keeps the figure. */
.nfcm-speed {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	font-family: var(--nfcm-body);
	white-space: nowrap;
}

.nfcm-speed--lightning {
	background: #fef3c7;
	color: #92400e;
}

.nfcm-speed--fast {
	background: #ccfbf1;
	color: #0f766e;
}

.nfcm-speed--steady {
	background: #ede9fe;
	color: #5b21b6;
}

.nfcm-speed--relaxed {
	background: var(--nfcm-line);
	color: var(--nfcm-ink-soft);
}

.nfcm-speed-block {
	margin: 8px 0 4px;
	text-align: center;
}

/* ---------- Dashboard achievements ---------- */

/* Ring beside the badge grid. flex-wrap rather than a media query, so the
   ring drops above the badges on a narrow column with no breakpoint to
   maintain. */
.nfcm-achieve__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.nfcm-achieve__ring {
	text-align: center;
	flex: 0 0 auto;
}

.nfcm-achieve__ring p {
	margin: 4px 0 0;
	font-size: 12px;
}

.nfcm-achieve__side {
	flex: 1 1 220px;
}

.nfcm-achieve__speed {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 0;
	font-size: 12px;
}

/* ---------- Notifications ---------- */

/* A single-column list; narrow content column, centered in the shared frame. */
.nfcm-notifs > * {
	max-width: 680px;
	margin-inline: auto;

	/* border-box so a padded child (.nfcm-card) measures the same as an
	   unpadded one and the column edges line up. */
	box-sizing: border-box;
}

.nfcm-notifs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.nfcm-notifs__head h2 {
	font-family: var(--nfcm-display);
	font-size: 24px;
	margin: 0;
}

.nfcm-notif {
	display: flex;
	gap: 12px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--nfcm-line);
}

.nfcm-notif:last-child {
	border-bottom: none;
}

.nfcm-notif.is-unread {
	background: #faf8ff;
	border-radius: var(--nfcm-radius-sm);
}

.nfcm-notif__ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: 15px;
	background: var(--nfcm-grad-soft);
	flex: none;
}

/* Divi colours every link #2ea3f2; the title should read as a title. */
.nfcm-notif__link {
	color: inherit;
	text-decoration: none;
}

.nfcm-notif__link:hover,
.nfcm-notif__link:focus {
	color: var(--nfcm-violet);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

	.nfcm-btn,
	.nfcm-plan,
	.nfcm-plan-pick__card {
		transition: none;
	}

	.nfcm-confetti {
		display: none;
	}
}

/* ---- [nicok_tasks] member task list ------------------------------------- */
.nfcm-tasks__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.nfcm-tasks__head h2 {
	font-family: var(--nfcm-display);
	font-size: 22px;
	margin: 0;
}

.nfcm-tasks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.nfcm-task {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	padding: 14px 16px;
	background: var(--nfcm-card-bg);
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius-sm);
	box-shadow: var(--nfcm-shadow);
	animation: nfcm-task-rise 0.4s ease both;

	/* In a narrow content column (the list is one of two grid tracks) the
	   aside drops to its own row rather than squeezing the name into one
	   word per line. */
	flex-wrap: wrap;
}

.nfcm-task__main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	flex: 1 1 60%;
}

.nfcm-task__text {
	min-width: 0;
}

.nfcm-task__status {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 14px;
	color: var(--nfcm-muted);
	background: var(--nfcm-grad-soft);
}

.nfcm-task.is-complete .nfcm-task__status {
	color: #fff;
	background: var(--nfcm-grad-teal);
}

.nfcm-task__name {
	font-weight: 600;
	color: var(--nfcm-ink);
}

.nfcm-task__desc {
	margin-top: 3px;
	font-size: 13px;
	color: var(--nfcm-muted);
}

.nfcm-task__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex: none;
}

.nfcm-task__points {
	font-weight: 700;
	color: var(--nfcm-indigo);
	white-space: nowrap;
}

.nfcm-task.is-complete .nfcm-task__name {
	color: var(--nfcm-ink-soft);
}

/* An expired task stays in the Open tab rather than disappearing, so it needs
   to read as unavailable at a glance. Muted, not struck through: the member can
   still open it, and an admin can extend the deadline. */
.nfcm-task.is-expired .nfcm-task__name {
	color: var(--nfcm-ink-soft);
}

.nfcm-task.is-expired .nfcm-task__points {
	opacity: 0.55;
}

/* Left accent distinguishes member tasks (teal) from tournament tasks (indigo).
   An inset shadow keeps the bar crisp against the card's rounded corners. */
.nfcm-task--member {
	box-shadow: inset 4px 0 0 0 #10b981, var(--nfcm-shadow);
	padding-left: 18px;
}

.nfcm-task--tournament {
	box-shadow: inset 4px 0 0 0 var(--nfcm-indigo), var(--nfcm-shadow);
	padding-left: 18px;
}

/* ---- [nicok_my_games] + the dashboard games card ------------------------ */

/* Deliberately the same sleeve as .nfcm-task: the two sit one above the other
   on the dashboard and a member should read them as one system. The border
   colours match too — green for a casual game, indigo for a tournament tie,
   exactly as member and tournament tasks are separated. */
.nfcm-games__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nfcm-game {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	padding: 14px 16px 14px 18px;
	background: var(--nfcm-card-bg);
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius-sm);
	box-shadow: var(--nfcm-shadow);
	animation: nfcm-task-rise 0.4s ease both;
}

.nfcm-game--casual {
	box-shadow: inset 4px 0 0 0 #10b981, var(--nfcm-shadow);
}

.nfcm-game--tournament {
	box-shadow: inset 4px 0 0 0 var(--nfcm-indigo), var(--nfcm-shadow);
}

.nfcm-game__main {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.nfcm-game__name {
	font-weight: 700;

	/* The name is the one part that can be arbitrarily long — a tournament tie
	   is "Firstname Lastname vs Firstname Lastname" — and it must not push the
	   button off a phone. */
	overflow-wrap: anywhere;
}

.nfcm-game__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 12.5px;
	color: var(--nfcm-muted);
}

.nfcm-pill--engine {
	background: #ede9fe;
	color: #5b21b6;
}

.nfcm-game__tourn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ---- [nicok_my_puzzles] + the dashboard puzzles card -------------------- */

/* The third member of the same family as .nfcm-task and .nfcm-game, and it
   arrived last: both puzzle surfaces used to borrow the tournaments sleeve
   (.nfcm-tour-card), which has a plain border and no accent, so a member had no
   way to tell a puzzle set for them from one belonging to a tournament. Same
   colours as the other two — teal for member scope, indigo for tournament — so
   the three cards stacked on the dashboard read as one system. */
.nfcm-puzzles__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nfcm-puzzle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	padding: 14px 16px 14px 18px;
	background: var(--nfcm-card-bg);
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius-sm);
	box-shadow: var(--nfcm-shadow);
	animation: nfcm-task-rise 0.4s ease both;
}

.nfcm-puzzle--member {
	box-shadow: inset 4px 0 0 0 #10b981, var(--nfcm-shadow);
}

.nfcm-puzzle--tournament {
	box-shadow: inset 4px 0 0 0 var(--nfcm-indigo), var(--nfcm-shadow);
}

/* Played is a finished thing, not a disabled one: the card stays fully legible
   and the green status pill carries the news. */
.nfcm-puzzle.is-played {
	border-color: #bbf7d0;
}

.nfcm-puzzle__main {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.nfcm-puzzle__name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.nfcm-puzzle__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 12.5px;
	color: var(--nfcm-muted);
}

/* The same pill a tournament task wears, so "which tournament" looks identical
   wherever it is answered. */
.nfcm-puzzle__tourn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	justify-self: start;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	color: var(--nfcm-indigo);
	background: rgba(109, 40, 217, 0.1);
}

.nfcm-puzzle__aside {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.nfcm-game__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.nfcm-game__result {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.nfcm-game__result--win {
	color: #15803d;
}

.nfcm-game__result--loss {
	color: #b91c1c;
}

.nfcm-game__result--draw {
	color: var(--nfcm-muted);
}

/* Still a link, so it stays reachable and announced — it just cannot be played
   yet, and the row says when it can. */
.nfcm-btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 480px) {
	.nfcm-game {
		align-items: flex-start;
		flex-direction: column;
	}

	.nfcm-game__aside {
		width: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nfcm-game {
		animation: none;
	}
}

.nfcm-task__tourn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	color: var(--nfcm-indigo);
	background: rgba(109, 40, 217, 0.1);
}

.nfcm-task__view {
	font-weight: 700;
	color: var(--nfcm-indigo);
	text-decoration: none;
	white-space: nowrap;
}

.nfcm-task__view:hover {
	text-decoration: underline;
}

@keyframes nfcm-task-rise {

	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.nfcm-task {
		animation: none;
	}
}

/* ---- [nicok_social] member engagement stats ----------------------------- */
.nfcm-social__title {
	font-family: var(--nfcm-display);
	font-size: 22px;
	margin: 0 0 14px;
}

.nfcm-social__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 560px) {

	.nfcm-social__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

.nfcm-stat {
	padding: 18px 16px;
	text-align: center;
	background: var(--nfcm-card-bg);
	border: 1px solid var(--nfcm-line);
	border-radius: var(--nfcm-radius-sm);
	box-shadow: var(--nfcm-shadow);
}

.nfcm-stat--accent {
	color: #fff;
	border: none;
	background: var(--nfcm-grad);
}

.nfcm-stat__value {
	display: block;
	font-family: var(--nfcm-display);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
}

.nfcm-stat__label {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--nfcm-muted);
}

.nfcm-stat--accent .nfcm-stat__label {
	color: #f0e6ff;
}

/* ---- [nicok_leaderboard] overarching member leaderboard ----------------- */
.nfcm-leaderboard__title {
	font-family: var(--nfcm-display);
	font-size: 22px;
	margin: 0 0 14px;
}

.nfcm-leaderboard__card {
	padding: 0;
	overflow: hidden;
}

.nfcm-lb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.nfcm-lb-table th,
.nfcm-lb-table td {
	padding: 12px 16px;
	text-align: left;
}

.nfcm-lb-table thead th {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nfcm-muted);
	border-bottom: 1px solid var(--nfcm-line);
}

.nfcm-lb-row {
	border-bottom: 1px solid var(--nfcm-line);
}

.nfcm-lb-row:last-child {
	border-bottom: none;
}

.nfcm-lb-row.is-me {
	background: var(--nfcm-grad-soft);
}

.nfcm-lb-rank {
	width: 48px;
	font-weight: 700;
}

.nfcm-lb-points {
	font-weight: 800;
	color: var(--nfcm-indigo);
	text-align: right;
}

/* The per-source columns. Muted and right-aligned so the eye still lands on the
   total, which is what the board is actually ranked by. They are the first
   thing to go on a phone: the table has to stay readable at 360px, and rank,
   name and total are the answer — the split is the explanation, and an
   explanation that forces a horizontal scroll is worse than none. */
.nfcm-lb-source {
	color: var(--nfcm-muted);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 640px) {

	.nfcm-lb-source {
		display: none;
	}
}

.nfcm-lb-pager {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

/* ---- [nicok_tournaments] member tournaments page ---- */
.nfcm-tournaments__title {
	font-family: var(--nfcm-display, "Sora", sans-serif);
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 14px;
}

.nfcm-tournaments__sub {
	font-family: var(--nfcm-display, "Sora", sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: #4a4360;
	margin: 18px 0 10px;
}

.nfcm-tour-list {
	display: grid;
	gap: 10px;
}

.nfcm-tour-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #ece8f5;
	border-radius: 12px;
	box-shadow: 0 10px 30px -20px rgba(80, 30, 120, 0.25);
}

.nfcm-tour-card__main {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nfcm-tour-card__name {
	font-weight: 700;
	color: #1a1130;
}

.nfcm-tour-status--registration_open {
	background: #dcfce7;
	color: #15803d;
}

.nfcm-tour-status--registration_closed {
	background: #fef3c7;
	color: #b45309;
}

.nfcm-tour-status--started {
	background: #ede9fe;
	color: #6d28d9;
}

.nfcm-tour-status--completed {
	background: #e5e7eb;
	color: #4b5563;
}

/* ---- Page head + back-to-dashboard link --------------------------------- */
.nfcm-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.nfcm-head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.nfcm-backlink {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nfcm-indigo);
	text-decoration: none;
	white-space: nowrap;
}

.nfcm-backlink:hover {
	text-decoration: underline;
}

/* Ghost button — secondary actions like "View" on a task sleeve. */
.nfcm-btn--ghost {
	background: transparent;
	color: var(--nfcm-indigo);
	border: 1.5px solid var(--nfcm-line);
}

.nfcm-btn--ghost:hover {
	border-color: var(--nfcm-indigo);
}

.nfcm-tag--done {
	color: #0f766e;
}

/* ---- Task list + detail panel -------------------------------------------- */

/* The list and the selected task's details sit side by side; below 900px the
   panel stacks under the list (public.js scrolls to it on selection). */
.nfcm-tasks__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 18px;
	align-items: start;
}

@media (max-width: 900px) {

	.nfcm-tasks__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nfcm-tasks__detail {
	position: sticky;
	top: 20px;
}

@media (max-width: 900px) {

	.nfcm-tasks__detail {
		position: static;
	}
}

/* outline, not box-shadow: the member/tournament left accents are themselves
   inset box-shadows, and a second one here would replace them. */
.nfcm-task.is-active {
	outline: 2px solid var(--nfcm-indigo);
	outline-offset: -2px;
}

.nfcm-taskpanel {
	padding: 24px;
	background: var(--nfcm-card-bg);
	border-radius: var(--nfcm-radius);
	box-shadow: 0 18px 40px -28px rgba(26, 17, 48, 0.45);
}

.nfcm-taskpanel[hidden] {
	display: none;
}

.nfcm-taskpanel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.nfcm-taskpanel__title {
	font-family: var(--nfcm-display);
	font-size: 19px;
	margin: 0;
	color: var(--nfcm-ink);
}

.nfcm-taskpanel__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.nfcm-taskpanel__body {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--nfcm-ink-soft);
	border-top: 1px solid var(--nfcm-line);
	padding-top: 14px;
}

.nfcm-taskpanel__foot {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--nfcm-line);
}

/* ---- Task video ---------------------------------------------------------- */

/* Providers hand back fixed width/height attributes, so the wrapper forces the
   player to fill a 16:9 box at whatever width the panel happens to be. */
.nfcm-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 16px;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

.nfcm-video iframe,
.nfcm-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Task submission ----------------------------------------------------- */

.nfcm-tag--warn {
	color: #b45309;
}

/* The member's own submission, shown back to them: read-only while an admin has
   it, and above the form when it came back so they can see what they are
   changing. */
.nfcm-taskresponse {
	margin-top: 16px;
	padding: 14px;
	border: 1px solid var(--nfcm-line);
	border-radius: 12px;
	background: var(--nfcm-wash, #faf9ff);
}

.nfcm-taskresponse__title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nfcm-muted);
}

/* Capped rather than full-bleed: a phone photo is often several thousand pixels
   tall and would push the form completely off screen. */
.nfcm-taskresponse__image,
.nfcm-taskresponse__video {
	display: block;
	max-width: 100%;
	max-height: 320px;
	border-radius: 10px;
	margin-top: 8px;
}

.nfcm-taskform {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--nfcm-line);
}

/* .nfcm-field styles `input` only — the submission form is the first place a
   textarea and a file input appear inside one. */
.nfcm-taskform textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--nfcm-line);
	border-radius: 11px;
	font-size: 14px;
	font-family: var(--nfcm-body);
	line-height: 1.6;
	background: #fff;
	box-sizing: border-box;
	resize: vertical;
}

.nfcm-taskform textarea:focus {
	outline: none;
	border-color: var(--nfcm-violet);
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.nfcm-taskform input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1.5px dashed var(--nfcm-line);
	border-radius: 11px;
	font-size: 13px;
	background: #fff;
	box-sizing: border-box;
}

.nfcm-field__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--nfcm-muted);
}

/* The character counter past its limit. maxlength normally stops this, but a
   paste on some mobile browsers slips through — and the server rejects it. */
.nfcm-field__hint.is-over {
	color: #b91c1c;
	font-weight: 600;
}

/* ---- Tournament participant profile ------------------------------------ */

/* The reminder, alongside the verify banner. One bar however many tournaments
   are outstanding — a member in three would otherwise stack three warnings
   above every page they open. */
.nfcm-tprofile-banner {
	margin: 0 0 12px;
}

.nfcm-tprofile-banner__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	flex-wrap: wrap;
}

.nfcm-tprofile-banner__text {
	font-weight: 600;
}

.nfcm-tprofile-banner__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

/* Divi colours every link #2ea3f2; on an amber alert that is unreadable, so
   each state is stated rather than inherited. */
.nfcm-tprofile-banner__link {
	color: #92400e;
	font-weight: 700;
	text-decoration: underline;
}

.nfcm-tprofile-banner__link:hover,
.nfcm-tprofile-banner__link:focus {
	color: #7c2d12;
}

/* The form itself. One card per question, so a long survey reads as a sequence
   of small asks rather than one wall. */
.nfcm-tprofile__title {
	margin: 0;
	font-family: var(--nfcm-display);
}

.nfcm-tprofile__lede {
	margin: 0 0 16px;
	color: var(--nfcm-ink-soft);
}

.nfcm-tprofile__q {
	margin: 0 0 14px;
	border: 1px solid var(--nfcm-line);
}

/* Every answer is optional, so this marks what is still blank without ever
   reading as an error: a dotted left edge, not a red border. */
.nfcm-tprofile__q.is-blank {
	border-left: 3px solid var(--nfcm-violet);
}

.nfcm-tprofile__legend {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--nfcm-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--nfcm-ink);
}

.nfcm-tprofile__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #ede9fe;
	color: #5b21b6;
	font-family: var(--nfcm-body);
	font-size: 12px;
	font-weight: 700;
}

.nfcm-tprofile__opts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 14px;
}

.nfcm-tprofile__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.nfcm-tprofile__text {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--nfcm-line);
	border-radius: 11px;
	font-family: var(--nfcm-body);
	font-size: 14px;
	line-height: 1.6;
	background: #fff;
	box-sizing: border-box;
	resize: vertical;
}

.nfcm-tprofile__text:focus {
	outline: none;
	border-color: var(--nfcm-violet);
	box-shadow: 0 0 0 4px rgb(139 92 246 / 15%);
}

.nfcm-tprofile__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--nfcm-muted);
}

.nfcm-tprofile__other {
	display: block;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--nfcm-ink-soft);
}

/* Reuses .nfcm-field's input styling rather than restating it — the markup
   carries both classes, so there is one description of what a text field looks
   like on a member page. Only the width is this box's own. */
.nfcm-tprofile__other .nfcm-field-inline {
	max-width: 320px;
	margin-top: 6px;
}

.nfcm-tprofile__actions {
	margin: 18px 0 0;
}

/* The dashboard card's second button. Ghost on the gradient rather than another
   solid white pill, so "View" stays the primary action of the row. */
.nfcm-btn--ghost-light {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgb(255 255 255 / 55%);
}

.nfcm-btn--ghost-light:hover,
.nfcm-btn--ghost-light:focus {
	background: rgb(255 255 255 / 16%);
	color: #fff;
	border-color: #fff;
}

.nfcm-tourn__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}