/* Advanced search.
   Uses the site's dark tokens from nstyle.css (--color-bg-base, --color-bg-card,
   --color-accent, Catamaran headings) rather than defining its own palette, so
   this page reads as part of the site instead of a bolted-on tool. */

.as-main {
	max-width: 1500px;
	margin: 0 auto;
	padding: 40px 5% 60px;
}

.as-head h1 {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--color-text-main);
	margin-bottom: 8px;
}

.as-head p {
	color: var(--color-text-muted);
	margin-bottom: 28px;
}

.as-layout {
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 32px;
	align-items: start;
}

/* --- filter sidebar --- */

.as-filters {
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 20px;
	background: var(--color-bg-card);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.as-filter-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.as-group {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.as-group h2 {
	font-family: var(--font-heading);
	font-size: 1rem;
	color: var(--color-text-main);
	margin-bottom: 10px;
}

.as-options label,
.as-check-inline {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	color: var(--color-text-main);
	font-size: 0.9rem;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.as-options label:hover,
.as-check-inline:hover { color: var(--color-accent-text); }

.as-options input[type="checkbox"],
.as-check-inline input[type="checkbox"] {
	accent-color: var(--color-accent);
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.as-count {
	margin-left: auto;
	color: var(--color-text-muted);
	font-size: 0.82rem;
}

.as-scroll {
	max-height: 240px;
	overflow-y: auto;
}

.as-field {
	display: block;
	margin-top: 12px;
	font-size: 0.9rem;
}

.as-field > span {
	display: block;
	margin-bottom: 6px;
	color: var(--color-text-muted);
}

.as-field strong { color: var(--color-text-main); }

.as-field input[type="search"],
.as-field input[type="number"],
.as-field select,
.as-year-row input {
	width: 100%;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--color-text-main);
	font-family: var(--font-body);
	font-size: 0.92rem;
	transition: var(--transition-smooth);
}

.as-field input:focus,
.as-field select:focus,
.as-year-row input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2);
}

.as-field select option {
	background-color: var(--color-bg-card);
	color: var(--color-text-main);
}

.as-field input[type="range"] {
	width: 100%;
	accent-color: var(--color-accent);
	padding: 0;
	background: none;
	border: none;
}

.as-year-row {
	display: flex;
	gap: 10px;
}

.as-year-row label {
	flex: 1;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.as-link-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-accent-text);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	text-decoration: underline;
}

.as-link-btn:hover { color: var(--color-accent); }

/* --- results --- */

.as-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	color: var(--color-text-main);
}

.as-toolbar-right {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.as-toolbar select {
	margin-left: 8px;
	padding: 8px 12px;
	background: var(--color-bg-card);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--color-text-main);
	font-family: var(--font-body);
	cursor: pointer;
}

.as-toolbar select option {
	background-color: var(--color-bg-card);
	color: var(--color-text-main);
}

.as-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.as-chip {
	padding: 5px 12px;
	background: rgba(229, 9, 20, 0.12);
	border: 1px solid rgba(229, 9, 20, 0.35);
	border-radius: 16px;
	color: var(--color-accent-text);
	font-family: var(--font-body);
	font-size: 0.82rem;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.as-chip:hover {
	background: rgba(229, 9, 20, 0.22);
}

.as-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}

.as-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-card);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	overflow: hidden;
	transition: var(--transition-smooth);
}

.as-card:hover {
	background: var(--color-bg-card-hover);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.as-cover img {
	width: 100%;
	aspect-ratio: 460 / 215;
	object-fit: cover;
	display: block;
	background: var(--color-bg-base);
}

.as-body { padding: 12px 14px 14px; }

.as-body h3 {
	font-family: var(--font-heading);
	font-size: 1rem;
	line-height: 1.35;
	margin-bottom: 5px;
}

.as-body h3 a {
	color: var(--color-text-main);
	text-decoration: none;
}

.as-body h3 a:hover { color: var(--color-accent-text); }

.as-meta {
	color: var(--color-text-muted);
	font-size: 0.82rem;
	line-height: 1.5;
	margin-bottom: 8px;
}

.as-prov,
.as-year {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: var(--color-text-muted);
	font-size: 0.88em;
}

.as-score {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--score-green);
	font-size: 0.85rem;
	font-weight: 600;
}

.as-flag { margin-left: 6px; }

.as-stores { margin-top: 8px; }

.as-empty {
	padding: 50px 10px;
	text-align: center;
	color: var(--color-text-muted);
}

.as-more {
	display: block;
	margin: 28px auto 0;
	padding: 12px 26px;
	background: var(--color-accent);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.95rem;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.as-more:hover { background: var(--color-accent-hover); }

@media (max-width: 900px) {
	.as-layout { grid-template-columns: 1fr; }
	.as-filters {
		position: static;
		max-height: none;
	}
}

/* --- scrollbars ------------------------------------------------------------
   The sidebar and the features list both scroll inside dark cards, where the
   browser default renders as a pale strip against the panel. Styled with the
   same tokens, thin and unobtrusive until hovered. Firefox takes the two
   standard properties; WebKit and Blink need the vendor pseudo-elements. */

.as-filters,
.as-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.as-filters::-webkit-scrollbar,
.as-scroll::-webkit-scrollbar {
	width: 10px;
}

.as-filters::-webkit-scrollbar-track,
.as-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.as-filters::-webkit-scrollbar-thumb,
.as-scroll::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	/* Transparent border plus background-clip insets the thumb so it does not
	   touch the panel edge, which is what makes a default scrollbar look bolted on. */
	border: 3px solid transparent;
	background-clip: content-box;
	transition: background-color 0.2s ease;
}

.as-filters::-webkit-scrollbar-thumb:hover,
.as-scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-accent);
}

.as-filters:hover,
.as-scroll:hover {
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* An option that would return nothing under the current filters. Dimmed rather
   than hidden, so the list does not reflow out from under the pointer and you
   can still see that the option exists. */
.as-options label.as-zero {
	opacity: 0.4;
}

.as-options label.as-zero:hover {
	color: var(--color-text-main);
}

.as-count {
	font-variant-numeric: tabular-nums;
}

/* Any/All switch. Sits in the group heading because it changes what the
   checkboxes below it mean, and reads as a pair of states rather than a button
   you press, so the inactive half stays visible instead of hiding. */
.as-match {
	float: right;
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	overflow: hidden;
}

.as-match button {
	padding: 2px 9px;
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.as-match button:hover { color: var(--color-text-main); }

.as-match button.on {
	background: var(--color-accent);
	color: #fff;
}

.as-group h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.as-match {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	font-family: var(--font-body);
}

.as-match em {
	color: var(--color-text-muted);
	font-style: normal;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.as-match-btns {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	overflow: hidden;
}

/* Spells out the operator the ticked boxes are combined with, so "Steam or
   Xbox" is never mistaken for "Steam and Xbox". */
.as-hint {
	margin-top: 8px;
	color: var(--color-text-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

/* The heading holds the title and the match switch on one row, but the sidebar
   is only 290px and a bare text node cannot shrink. Without wrapping, a longer
   title like "Players and modes" is clipped by the switch. Wrap instead: the
   switch drops to its own line and keeps its right alignment. */
.as-group h2 {
	flex-wrap: wrap;
	gap: 4px 10px;
	line-height: 1.3;
}

.as-match {
	margin-left: auto;
	flex: none;
}