/* Cards and tiles come from /css/card.css */

/* The search tips make way for the results */
.content:has(.search-results:not(:empty)) .card--example {
	display: none;
}

/* Search box, kept in view while scrolling through results */
.search-bar {
	position: sticky;
	top: 0;
	/* Above the result tiles' Save and Pin buttons, which sit at 1 */
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
	padding: var(--spacing) var(--spacing-double);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing);
	background-image: linear-gradient(to right, var(--color-background), var(--color-background-offset), var(--color-background));

	.search-control {
		display: flex;
		align-items: center;
		gap: var(--spacing);
		width: min(100%, calc(var(--card-width) - var(--spacing-double) * 2));
		box-sizing: border-box;
		padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-double);
		background-color: var(--color-foreground);
		border: var(--size-border) solid var(--color-primary);
		border-radius: calc(var(--spacing) * 5);
		box-shadow: var(--card-shadow);

		.search-control__input {
			width: 100%;
			font-size: 1.5rem;
			padding: 0 var(--spacing);
			background-color: transparent;
			border: none;

			&:focus {
				outline: none;
			}
		}

		.button {
			flex: none;
			aspect-ratio: 1/1;
			width: 2rem;
			height: 2rem;
			padding: var(--spacing);
			box-sizing: border-box;
			border-radius: 50%;
			border: var(--size-border) solid var(--color-primary);
			text-decoration: none;
		}
	}

	.search-metrics {
		text-align: center;

		&:empty {
			display: none;
		}
	}
}

/* Quick Search terms, bordered like the tiles below them */
.form--example-search {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--spacing);
	margin: 0;
	padding: 0;

	.button--example-search {
		font-size: 1.1rem;
		padding: var(--spacing);
		background-color: var(--color-foreground);
		color: var(--color-primary);
		border: var(--size-border) solid var(--color-primary);
		border-radius: var(--spacing-double);
		cursor: pointer;

		&:hover, &:focus-visible {
			background-color: var(--color-primary);
			color: var(--color-foreground);
		}
	}
}

.tiles > .tile .tile__number {
	float: left;
	color: var(--color-primary);
	padding: 0 0.5rem 0.5rem 0;
	font-weight: bold;
	font-size: 2rem;
	line-height: 1;
}

/* Pinned monsters sit on the start page; the card stays out of sight until something is pinned */
.card--pinned:has(.pinned-results:empty) {
	display: none;
}

/* One tile per row, each using the column's full width */
.search-results, .pinned-results {
	display: grid;
	gap: var(--spacing-double);
	grid-template-columns: 1fr;
}

/*
 * A result tile, styled after HeroQuest's monster cards (and the Monster Forge's): the name on a
 * scroll banner, a parchment face and the card's bordered stat strip. The whole tile opens the monster.
 */
.search-result {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	padding: var(--spacing-double);
	background-color: var(--color-background-offset);
	/* Aged edges, like the printed card */
	background-image: radial-gradient(ellipse at center, transparent 60%, var(--hq-parchment-dark) 140%);
	border: 5px solid var(--color-background);
	border-radius: 1rem;
	box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
	color: var(--color-primary);

	&:hover {
		box-shadow: var(--card-shadow);
	}

	&:has(.search-result__open:focus-visible) {
		outline: 3px solid var(--color-primary);
		outline-offset: 3px;
	}

	p {
		margin: 0;
	}

	/*
	 * The name on the scroll banner. The image keeps its shape and the name sits in the same grid cell,
	 * over the paper: banner.png is 270 x 73 and its paper runs from 6 to 38 pixels down. A grid item's
	 * margins are a share of the cell's width and its height a share of the cell's height, so the name's
	 * box starts 6/270 of the width down and is 32/73 of the height tall.
	 */
	.search-result__title {
		display: grid;
		align-self: center;
		width: min(100%, 380px);
		margin: 0;

		> * {
			grid-area: 1 / 1;
		}
	}

	.search-result__banner {
		display: block;
		width: 100%;
		height: auto;
	}

	.search-result__open {
		align-self: start;
		box-sizing: border-box;
		height: calc(32 / 73 * 100%);
		margin: calc(6 / 270 * 100%) 13% 0;
		padding: 0;
		overflow: hidden;
		background: none;
		border: none;
		color: inherit;
		font: inherit;
		font-size: clamp(1rem, 4.6vw, 1.25rem);
		line-height: 1.1;
		text-align: center;
		cursor: pointer;

		&:focus-visible {
			outline: none;
		}

		/* Stretch the link over the tile so any tap opens the monster */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
		}
	}

	.search-result__header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--spacing);
	}

	.search-result__kind {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing);
		font-style: italic;
		font-weight: bold;
	}

	.search-result__tier {
		padding: 0 var(--spacing);
		border-radius: var(--spacing-double);
		background-color: var(--color-primary);
		color: var(--color-foreground);
		font-style: normal;
		white-space: nowrap;
	}

	/* Above the stretched link, so the buttons get their own taps */
	.search-result__actions {
		position: relative;
		z-index: 1;
		/* Stays on the right when it wraps under the kind and tier */
		margin-inline-start: auto;
		display: flex;
		gap: var(--spacing-half);
		flex: none;
	}

	.search-result__action {
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 1.25rem;
		color: var(--color-primary);
		background-color: var(--color-foreground);
		border: var(--size-border) solid var(--color-primary);
		border-radius: 50%;
		cursor: pointer;

		&:hover, &:focus-visible {
			background-color: var(--color-primary);
			color: var(--color-foreground);
		}
	}

	/*
	 * The card's stat strip: label over value, in bordered cells. Real borders, not gaps over a dark
	 * background: a zoomed-out browser draws a 1px gap thinner than a screen pixel and it vanishes, while
	 * a border is always at least one screen pixel.
	 */
	.search-result__stats {
		--_border: 1px solid var(--color-primary);
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		margin: 0;
		background-color: var(--color-foreground);
		border: var(--_border);
		box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
		text-align: center;

		.search-result__stat {
			display: flex;
			flex-direction: column;

			& + .search-result__stat {
				border-inline-start: var(--_border);
			}
		}

		dt, dd {
			margin: 0;
			padding: var(--spacing-half);
		}

		dt {
			border-bottom: var(--_border);
		}

		dt {
			flex: 1;
			align-content: center;
			font-family: var(--font-title);
			font-size: 0.75rem;
			text-wrap: balance;
		}

		dd {
			font-size: 1.75rem;
			font-weight: bold;
		}
	}

	/* "Source ........ Tome of Beasts", like the card's "Special Ability ........ Spellcaster" */
	.search-result__source {
		display: flex;
		align-items: baseline;
		gap: var(--spacing-half);
		font-weight: bold;

		.search-result__leader {
			flex: 1;
			min-width: var(--spacing-double);
			border-bottom: 2px dotted currentColor;
		}

		.search-result__book {
			text-align: end;
		}
	}
}

/* Monster details dialog */
.action.action--selected {
	font-size: 1.5rem;
	color: inherit;
}

.card__photo-container .card__photo {
	width: 100%;
}

.info {
	display: flex;
	flex-direction: row;
	gap: var(--spacing);

	.info__title {
		font-size: 1rem;
		font-weight: 700;
	}
}