/* Bootstrap 4.6 has no dark mode, so most of this file is repainting its light
   defaults. The palette lives in :root; element colours drive every accent. */

:root {
	--bg: #14131A;
	--surface: #1D1C26;
	--surface-2: #272632;
	--line: #35333F;
	--ink: #EDEBF2;
	--muted: #A09DAE;
	--faint: #6E6B7C;
	--gold: #C8A96A;
	--purple: #A07BC8;

	--anemo:   #74C2A8;
	--geo:     #F2B441;
	--electro: #B08FC4;
	--dendro:  #A5C83B;
	--hydro:   #4CC2F1;
	--pyro:    #EF7938;
	--cryo:    #9FD6E3;

	/* Each element block sets this; everything accent-coloured reads it. */
	--el: var(--gold);
}

.el-anemo   { --el: var(--anemo); }
.el-geo     { --el: var(--geo); }
.el-electro { --el: var(--electro); }
.el-dendro  { --el: var(--dendro); }
.el-hydro   { --el: var(--hydro); }
.el-pyro    { --el: var(--pyro); }
.el-cryo    { --el: var(--cryo); }

/* Official Vision and weapon-type icons, used inline next to (or instead of) the name
   they stand for. Both are already coloured artwork, so they are never tinted, only
   sized to the running text. The filter chips override the size and drop the margin. */
.el-icon,
.wep-icon {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -.22em;
	margin-right: .25em;
}


/* ---------- base ---------- */

html, body {
	background-color: var(--bg);
	color: var(--ink);
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--gold);
}

a:hover, a:focus {
	color: #E0C68B;
}

hr {
	border-top-color: var(--line);
}

::selection {
	background: var(--gold);
	color: var(--bg);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }


/* ---------- bootstrap overrides ---------- */

.card {
	background-color: var(--surface);
	border: 1px solid var(--line);
}

.card-header {
	background-color: var(--surface-2);
	border-bottom-color: var(--line);
}

.table {
	color: var(--ink);
	/* Stat columns only line up with fixed-width digits. */
	font-variant-numeric: tabular-nums;
}

.table th, .table td {
	border-top-color: var(--line);
}

.table thead th {
	border-bottom-color: var(--line);
	color: var(--muted);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, .025);
}

.table-hover tbody tr:hover {
	background-color: rgba(255, 255, 255, .05);
	color: var(--ink);
}

.form-control {
	background-color: var(--surface-2);
	border-color: var(--line);
	color: var(--ink);
}

.form-control:focus {
	background-color: var(--surface-2);
	border-color: var(--gold);
	color: var(--ink);
	box-shadow: 0 0 0 .2rem rgba(200, 169, 106, .2);
}

.form-control::placeholder {
	color: var(--faint);
}

.bg-light, .bg-white {
	background-color: var(--surface) !important;
}

.text-dark {
	color: var(--ink) !important;
}

.text-muted {
	color: var(--muted) !important;
}

.border, .border-top, .border-bottom, .border-left, .border-right {
	border-color: var(--line) !important;
}

.list-group-item {
	background-color: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}

.dropdown-menu {
	background-color: var(--surface-2);
	border-color: var(--line);
}

.dropdown-item {
	color: var(--ink);
}

.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--line);
	color: var(--ink);
}

.jumbotron {
	background-color: var(--surface);
}

.close {
	color: var(--ink);
	text-shadow: none;
}

.modal-content {
	background-color: var(--surface);
	border-color: var(--line);
}

.btn-outline-secondary {
	border-color: var(--line);
	color: var(--muted);
}

.btn-outline-secondary:hover {
	background-color: var(--surface-2);
	border-color: var(--el);
	color: var(--ink);
}

/* Bootstrap's own .shadow-sm rule wins on specificity without !important. */
.shadow-sm {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important;
}


/* ---------- chrome ---------- */

header .navbar {
	background-color: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: .6rem 1.25rem;
}

.navbar-brand {
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink) !important;
}

.brand-accent {
	color: var(--gold);
	font-weight: 400;
}

.navbar-dark .navbar-nav .nav-link {
	color: var(--muted);
	padding-left: 1rem;
	padding-right: 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: var(--ink);
}

.navbar-dark .navbar-nav .nav-link.active {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--gold);
}

main {
	min-height: 70vh;
	padding: 2rem 0 3rem;
}

footer {
	border-top: 1px solid var(--line);
	padding: 1.5rem 0;
	font-size: .875rem;
}

footer p {
	margin-bottom: 0;
}


/* ---------- intro ---------- */

.intro {
	margin-bottom: 2.5rem;
	max-width: 46rem;
}

.intro h1 {
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: .75rem;
}

.intro-lead {
	font-size: 1.125rem;
	color: var(--ink);
}

.intro-note {
	color: var(--muted);
	font-size: .9375rem;
	margin-bottom: 0;
}

.section-label {
	color: var(--muted);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 1rem;
}


/* ---------- portraits ---------- */

.portrait {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex: 0 0 48px;
	object-fit: cover;
	border: 1px solid var(--el);
}

.portrait-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--surface-2);
	color: var(--el);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}

.portrait-lg {
	width: 84px;
	height: 84px;
	flex: 0 0 84px;
	font-size: 2rem;
}


/* ---------- filter bar ---------- */

/* Layout is Prydwen's, since this copies their tier list bar. The palette is ours:
   their brand blue becomes --gold, and the chips take the same .375rem radius as
   every card and tile rather than their square corners. */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 1.5rem;
}

/* gem.js adds this once it has bound itself, so the controls never appear inert. */
.filter-bar:not(.filters-ready) {
	display: none;
}

.filter-el {
	display: flex;
	align-items: center;
	gap: 5px;
}

.filter-search {
	flex: 0 1 16rem;
	min-width: 12rem;
	position: relative;
}

.filter-search .form-control {
	height: 40px;
	padding-right: 2rem;
}

.filter-clear {
	position: absolute;
	top: 50%;
	right: .55rem;
	transform: translateY(-50%);
	color: var(--faint);
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	padding: 0 .2em;
}

.filter-clear.active {
	color: var(--gold);
}

/* One filter is one segmented control: the chips share borders so the whole run reads
   as a single group, and only the outer corners are rounded. .filter-bar's gap is then
   the only spacing left, which is what separates one filter from the next. */
.filter-group {
	flex-wrap: wrap;
	gap: 0;
}

.filter-group .filter-chip {
	border-radius: 0;
	margin-left: -1px;  /* collapse the shared border so it stays 1px, not 2 */
}

.filter-group .filter-chip:first-child {
	border-top-left-radius: .375rem;
	border-bottom-left-radius: .375rem;
	margin-left: 0;
}

.filter-group .filter-chip:last-child {
	border-top-right-radius: .375rem;
	border-bottom-right-radius: .375rem;
}

/* A lit or hovered chip has to paint its own border over its neighbour's. */
.filter-group .filter-chip:hover,
.filter-group .filter-chip:focus-visible,
.filter-group .filter-chip.active {
	position: relative;
	z-index: 1;
}

.filter-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 40px;
	padding: 7px 14px;
	background-color: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: .375rem;
	color: var(--muted);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.filter-chip:hover {
	border-color: var(--el);
	color: var(--ink);
}

.filter-chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(200, 169, 106, .2);
}

/* A lit chip sinks to the page background and doubles its border in its own accent,
   rather than filling with it. A solid fill put Vision artwork on top of a colour it
   was fighting, and Geo on gold vanished outright. Element chips carry an .el-* class
   so --el is theirs; every other chip falls through to the gold :root default. */
.filter-chip.active {
	background-color: var(--bg);
	border-color: var(--el);
	color: var(--el);
	box-shadow: inset 0 0 0 1px var(--el);
}

.filter-chip.active:focus-visible {
	box-shadow: inset 0 0 0 1px var(--el), 0 0 0 .2rem rgba(200, 169, 106, .2);
}

/* Vision and weapon artwork is already coloured, so chips never tint it. The inactive
   ones are drained so the lit chip is the thing your eye lands on. */
.filter-chip img {
	width: 24px;
	height: 24px;
	margin: 0;  /* .el-icon carries a trailing margin meant for running text */
	filter: grayscale(.7);
	opacity: .75;
	transition: filter .12s ease, opacity .12s ease;
}

.filter-chip:hover img,
.filter-chip.active img {
	filter: none;
	opacity: 1;
}

.filter-reset-btn {
	font-weight: 400;
}

.filter-reset-btn:disabled {
	opacity: .45;
	cursor: default;
	border-color: var(--line);
	color: var(--muted);
}

.filter-empty {
	color: var(--muted);
	padding: 2rem 0;
}


/* ---------- character grid ---------- */

.tile {
	display: block;
	height: 100%;
	padding: 1rem;
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--el);
	border-radius: .375rem;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}

a.tile:hover {
	background-color: var(--surface-2);
	border-color: var(--el);
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-2px);
}

/* Drafts outnumber written pages, so they read as empty slots rather than being
   dimmed: a flat background, a dashed edge and a drained portrait. Opacity on the
   whole tile took the text with it and left it below any usable contrast. */
.tile-draft {
	background-color: transparent;
	border-left-style: dashed;
	cursor: default;
}

.tile-draft .tile-name,
.tile-draft .tile-meta,
.tile-draft .tile-tldr,
.tile-draft .rarity-4,
.tile-draft .rarity-5 {
	color: var(--muted);
}

.tile-draft .tile-name {
	font-weight: 500;
}

.tile-draft .portrait {
	filter: grayscale(.85);
	opacity: .6;
}

.tile-head {
	display: flex;
	align-items: center;
	margin-bottom: .625rem;
}

.tile-id {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-left: .75rem;
}

.tile-name {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
}

.tile-meta {
	color: var(--muted);
	font-size: .8125rem;
	margin-top: .125rem;
}

.tile-tldr {
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.45;
	margin-bottom: 0;
}

.rarity-5 { color: var(--gold); }
.rarity-4 { color: var(--purple); }


/* ---------- character page ---------- */

.charhead {
	display: flex;
	align-items: center;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.charhead-id {
	margin-left: 1.25rem;
}

.charhead-name {
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}

.charhead-badges {
	display: flex;
	flex-wrap: wrap;
}

.charhead-badges .badge {
	font-weight: 500;
	font-size: .75rem;
	padding: .35em .6em;
	margin-right: .375rem;
	margin-bottom: .375rem;
}

.badge-element {
	background-color: var(--surface-2);
	border: 1px solid var(--el);
	color: var(--el);
}

.badge-rarity {
	background-color: var(--surface-2);
	border: 1px solid currentColor;
}

.badge-plain {
	background-color: var(--surface-2);
	color: var(--muted);
}

.guide {
	max-width: 52rem;
}

.guide-section {
	margin-bottom: 1.25rem;
}

.guide-title {
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--el);
	margin-bottom: 1rem;
}

.guide-subtitle {
	color: var(--muted);
	font-size: .875rem;
	margin-top: -.5rem;
	margin-bottom: 1rem;
}

.guide-section p:last-child,
.guide-section ol:last-child,
.guide-section ul:last-child,
.guide-section .table:last-child {
	margin-bottom: 0;
}

.guide-section ol, .guide-section ul {
	padding-left: 1.25rem;
}

.guide-section li {
	margin-bottom: .5rem;
}

.guide-tldr p {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.pairs {
	display: flex;
	flex-wrap: wrap;
}

.pair-pill {
	background-color: var(--surface-2);
	border: 1px solid var(--el);
	color: var(--el);
	border-radius: 1rem;
	font-size: .875rem;
	font-weight: 600;
	padding: .3rem .85rem;
	margin-right: .5rem;
	margin-bottom: .5rem;
}

.guide-shot {
	margin: 1rem 0 0;
	text-align: center;
}

.guide-shot img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--el);
	border-radius: .5rem;
}

.guide-shot figcaption {
	color: var(--muted);
	font-size: .8125rem;
	margin-top: .4rem;
}

.deepdive {
	color: var(--muted);
	font-size: .875rem;
	margin-top: 1.5rem;
}

/* ---------- about ---------- */

.prose {
	max-width: 44rem;
}

.prose h2 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: .75rem;
}

.prose p, .prose li {
	color: var(--muted);
	line-height: 1.65;
}


@media (max-width: 767.98px) {
	.filter-reset,
	.filter-reset .filter-chip {
		width: 100%;
	}
}


@media (max-width: 575.98px) {
	.filter-chip {
		padding: 7px 8px;
	}

	.portrait-lg {
		width: 64px;
		height: 64px;
		flex: 0 0 64px;
		font-size: 1.5rem;
	}

	.charhead-name {
		font-size: 1.5rem;
	}
}


/* ---------- contact form ---------- */

.contact-form {
	max-width: 34rem;
	margin-top: 1.5rem;
}

.form-row-gem {
	margin-bottom: 1.25rem;
}

.form-label-gem {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin-bottom: .35rem;
}

.form-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--faint);
}

.form-hint {
	font-size: .85rem;
	color: var(--faint);
	margin: .4rem 0 0;
}

.contact-form textarea.form-control {
	resize: vertical;
}

.btn-gem {
	background-color: var(--gold);
	border: 1px solid var(--gold);
	color: var(--bg);
	font-weight: 600;
	padding: .5rem 1.5rem;
}

.btn-gem:hover, .btn-gem:focus {
	background-color: #E0C68B;
	border-color: #E0C68B;
	color: var(--bg);
}

.btn-gem:focus {
	box-shadow: 0 0 0 .2rem rgba(200, 169, 106, .3);
}

/* Result banner. The left edge carries the colour so the fill can stay page-coloured. */
.form-note {
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--el);
	border-radius: .375rem;
	padding: .9rem 1.1rem;
	margin: 1.5rem 0;
}

.form-note p {
	margin-bottom: .5rem;
}

.form-note p:last-child {
	margin-bottom: 0;
}

.form-note-good {
	--el: var(--dendro);
}

.form-note-bad {
	--el: var(--pyro);
}

/* The honeypot. Off-screen rather than display:none, since some bots skip hidden inputs. */
.form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}