/*
 * Nexus Frontier.
 *
 * Every panel carries its section colour as --nf-c, set inline by PHP from the
 * Dispatch's own palette, and everything here reads that variable rather than
 * naming a colour. So the day the game recolours a section, the site follows.
 *
 * The palette is dark by nature, but a WordPress theme may be either, so the
 * panels paint their own background instead of inheriting one.
 */

.nf-panel {
	--nf-c: #63e6ff;
	--nf-ink: #e8eef5;
	--nf-dim: #9fb0c0;
	--nf-bg: #101a26;
	--nf-line: rgba( 255, 255, 255, .09 );

	position: relative;
	margin: 0 0 1.4em;
	padding: 1em 1.1em 1.1em;
	border: 1px solid var( --nf-line );
	border-top: 2px solid var( --nf-c );
	border-radius: 6px;
	background: var( --nf-bg );
	color: var( --nf-ink );
	font-size: 15px;
	line-height: 1.5;
}

.nf-panel.is-stale { opacity: .62; }

/* ---------------------------------------------------------------- heading */

.nf-head {
	display: flex;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 .75em;
	padding-bottom: .5em;
	border-bottom: 1px solid var( --nf-line );
}

.nf-head .nf-ico { color: var( --nf-c ); font-size: 1.05em; line-height: 1; }

.nf-head .nf-title {
	color: var( --nf-c );
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .82em;
}

/* ------------------------------------------------------------------ stats */

.nf-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: .55em .9em;
}

.nf-stat { display: flex; flex-direction: column; gap: .1em; }
.nf-stat .nf-k { color: var( --nf-dim ); font-size: .74em; text-transform: uppercase; letter-spacing: .06em; }
.nf-stat .nf-v { font-size: 1.22em; font-weight: 600; font-variant-numeric: tabular-nums; }

.nf-stat.is-good .nf-v { color: #6ee7a8; }
.nf-stat.is-warn .nf-v { color: #ffd479; }
.nf-stat.is-bad  .nf-v { color: #ff8fa3; }

.nf-note { margin: .7em 0 0; color: var( --nf-dim ); font-size: .86em; }

/* -------------------------------------------------------------- power bar */

.nf-bar {
	margin-top: .85em;
	height: 7px;
	border-radius: 4px;
	background: rgba( 255, 255, 255, .08 );
	overflow: hidden;
}

.nf-bar span { display: block; height: 100%; background: #6ee7a8; transition: width .4s ease; }
.nf-bar span.near { background: #ffd479; }
.nf-bar span.over { background: #ff8fa3; }

/* ----------------------------------------------------------------- alerts */

.nf-clear { display: flex; align-items: center; gap: .5em; color: #6ee7a8; font-size: .92em; }

.nf-alerts { list-style: none; margin: 0; padding: 0; }

.nf-alert {
	margin: 0 0 .55em;
	padding: .55em .7em;
	border-left: 3px solid var( --nf-c );
	border-radius: 3px;
	background: rgba( 255, 255, 255, .04 );
}

.nf-alert:last-child { margin-bottom: 0; }
.nf-alert.is-bad  { border-left-color: #ff8fa3; }
.nf-alert.is-warn { border-left-color: #ffd479; }

.nf-alert-t { display: block; font-weight: 650; }
.nf-alert.is-bad  .nf-alert-t { color: #ff8fa3; }
.nf-alert.is-warn .nf-alert-t { color: #ffd479; }
.nf-alert-b { display: block; color: var( --nf-dim ); font-size: .88em; margin-top: .12em; }

/* ------------------------------------------------------------------ table */

.nf-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.nf-table th {
	text-align: left;
	padding: .35em .5em;
	border-bottom: 1px solid var( --nf-line );
	color: var( --nf-dim );
	font-weight: 600;
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.nf-table td { padding: .4em .5em; border-bottom: 1px solid rgba( 255, 255, 255, .05 ); font-variant-numeric: tabular-nums; }
.nf-table tr:last-child td { border-bottom: 0; }
.nf-table .nf-rank { width: 2.4em; color: var( --nf-dim ); }
.nf-table .nf-name { font-variant-numeric: normal; }

.nf-tag {
	display: inline-block;
	margin-left: .4em;
	padding: 0 .4em;
	border: 1px solid var( --nf-line );
	border-radius: 3px;
	color: var( --nf-dim );
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ cards */

.nf-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
	gap: .6em;
}

.nf-card { padding: .6em .7em; border: 1px solid var( --nf-line ); border-radius: 5px; background: rgba( 255, 255, 255, .03 ); }
.nf-card-h { color: var( --nf-c ); font-weight: 650; margin-bottom: .2em; }
.nf-card-b { color: var( --nf-dim ); font-size: .86em; }

/* --------------------------------------------------------------- alliance */

.nf-ally { display: flex; align-items: center; gap: .6em; margin-bottom: .7em; }
.nf-tagbig {
	padding: .12em .5em;
	border: 1px solid var( --nf-c );
	border-radius: 4px;
	color: var( --nf-c );
	font-weight: 700;
	letter-spacing: .08em;
}
.nf-allyname { font-size: 1.08em; font-weight: 600; }

.nf-members { list-style: none; margin: 0; padding: 0; }
.nf-members li { display: flex; align-items: center; gap: .45em; padding: .22em 0; font-size: .92em; }
.nf-members .nf-dot { width: 7px; height: 7px; border-radius: 50%; background: #46586a; flex: 0 0 auto; }
.nf-members .is-online .nf-dot, .nf-members li.is-online .nf-dot { background: #6ee7a8; }
.nf-members .nf-when { margin-left: auto; color: #6ee7a8; font-size: .78em; text-transform: uppercase; letter-spacing: .05em; }

/* --------------------------------------------------------------- contests */

.nf-contest { padding: .6em 0; border-bottom: 1px solid rgba( 255, 255, 255, .05 ); }
.nf-contest:last-child { border-bottom: 0; padding-bottom: 0; }
.nf-contest-h { display: flex; align-items: baseline; gap: .6em; }
.nf-contest-h strong { color: var( --nf-c ); }

.nf-state {
	margin-left: auto;
	color: var( --nf-dim );
	font-size: .74em;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.nf-contest.is-open .nf-state { color: #6ee7a8; }
.nf-contest.is-announced .nf-state { color: #ffd479; }

.nf-contest-d { margin: .25em 0 .45em; color: var( --nf-dim ); font-size: .88em; }

.nf-board { margin: 0; padding: 0 0 0 1.4em; font-size: .9em; }
.nf-board li { padding: .1em 0; }
.nf-board .nf-score { float: right; color: var( --nf-dim ); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- headlines */

.nf-heads { list-style: none; margin: 0; padding: 0; }
.nf-heads li { display: flex; gap: .5em; padding: .3em 0; border-bottom: 1px solid rgba( 255, 255, 255, .05 ); }
.nf-heads li:last-child { border-bottom: 0; }
.nf-heads .nf-ico { color: var( --nf-c ); font-style: normal; flex: 0 0 1.1em; }

/* ------------------------------------------------------------- the paper */

.nf-paper { color: var( --nf-ink ); }

.nf-masthead {
	font-size: clamp( 22px, 5vw, 38px );
	font-weight: 800;
	letter-spacing: .04em;
	text-align: center;
	background: linear-gradient( 95deg, #63e6ff, #9fe8ff, #ffd479, #ff9d5c );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not ( background-clip: text ) {
	.nf-masthead { color: #ffd479; background: none; }
}

.nf-pubby {
	text-align: center;
	color: var( --nf-dim );
	font-size: .72em;
	letter-spacing: .18em;
	margin-bottom: 1.2em;
	padding-bottom: .6em;
	border-bottom: 1px solid var( --nf-line );
}

.nf-pubby .nf-sol { margin-left: .8em; color: var( --nf-c ); }

.nf-page { margin: 0 0 1.8em; }

.nf-prule {
	display: flex;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 .5em;
	padding-bottom: .3em;
	border-bottom: 2px solid var( --nf-c );
	color: var( --nf-c );
	font-size: .86em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nf-prule .nf-ico { font-style: normal; }
.nf-prule .nf-proman { margin-left: auto; opacity: .65; }

.nf-standfirst {
	margin: 0 0 .9em;
	padding-left: .8em;
	border-left: 2px solid var( --nf-c );
	color: var( --nf-dim );
	font-style: italic;
}

.nf-empty { color: var( --nf-dim ); font-style: italic; }

.nf-story { margin: 0 0 1.1em; }
.nf-story h4 { margin: 0 0 .3em; font-size: 1.12em; line-height: 1.25; color: var( --nf-ink ); }
.nf-story.is-lead h4 { font-size: 1.42em; }
.nf-story p { margin: 0 0 .55em; }
.nf-byline { color: var( --nf-dim ); font-size: .82em; font-style: italic; }

.nf-mfoot {
	margin-top: 1.4em;
	padding-top: .8em;
	border-top: 1px solid var( --nf-line );
	color: var( --nf-dim );
	font-size: .8em;
	line-height: 1.55;
}

/* S.C.R.I.B.E. -- one colour per initial, the way the game writes it. */
.nf-scribe { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; font-weight: 600; }
.nf-scribe i { font-style: normal; }
.nf-scribe i:nth-of-type(1) { color: #63e6ff; }
.nf-scribe i:nth-of-type(2) { color: #6ee7a8; }
.nf-scribe i:nth-of-type(3) { color: #ffd479; }
.nf-scribe i:nth-of-type(4) { color: #ff9d5c; }
.nf-scribe i:nth-of-type(5) { color: #ff8fa3; }
.nf-scribe i:nth-of-type(6) { color: #5fd6c4; }

/* ------------------------------------------------------------- the pulse */

.nf-pulse {
	position: absolute;
	top: .55em;
	right: .7em;
	display: flex;
	align-items: center;
	gap: .3em;
	color: var( --nf-dim );
	font-size: .66em;
	text-transform: uppercase;
	letter-spacing: .09em;
}

.nf-pulse span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6ee7a8;
	animation: nf-beat 2.4s ease-in-out infinite;
}

@keyframes nf-beat {
	0%, 100% { opacity: .25; }
	50% { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.nf-pulse span { animation: none; opacity: .8; }
	.nf-bar span { transition: none; }
}

.nf-problem {
	padding: .5em .65em;
	border-left: 3px solid #ff8fa3;
	border-radius: 3px;
	background: rgba( 255, 143, 163, .08 );
	color: #ffd2da;
	font-size: .9em;
}

/* ------------------------------------------------------------- wp-admin */

.nf-wrap .nf-h1 { display: flex; align-items: center; gap: .4em; }
.nf-wrap .nf-h1-i { color: var( --nf-c ); }
.nf-wrap .nf-lede { max-width: 46em; font-size: 14px; color: #50575e; }
.nf-wrap .nf-test-out { margin-left: .7em; font-weight: 600; }
.nf-wrap .nf-test-out.ok { color: #1a7f37; }
.nf-wrap .nf-test-out.bad { color: #b32d2e; }

.nf-wrap .nf-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 1em;
	margin: 1em 0 1.6em;
}

.nf-wrap .nf-grid .nf-panel { margin: 0; }

.nf-blocks { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: .6em; }

.nf-block {
	display: block;
	padding: .6em .75em;
	border: 1px solid #dcdcde;
	border-left: 3px solid var( --nf-c );
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.nf-block:hover { background: #f6f7f7; }
.nf-block input { margin-right: .4em; }
.nf-block .nf-block-t { font-weight: 600; }
.nf-block .nf-block-b { display: block; margin: .2em 0 .3em; color: #50575e; font-size: .88em; }
.nf-block code { font-size: .8em; background: #f0f0f1; }

.nf-about { max-width: 46em; }
.nf-about h2 { margin-top: 1.6em; font-size: 1.05em; }
.nf-codes code { white-space: nowrap; }