/* The find-a-muse box and the panel it drops (muses/finder.ts): the wallet's
   own muses with nothing typed, the matches once something is. The whole
   box is here, from the label and the pill to the rows, so the sky (/kin) and
   the pot's check (/pot) are one control; a page sets only where it sits and
   how wide. Loaded by the pages that use the finder. */

.find {
	display: grid;
	gap: 8px;
	min-width: 0;
}
/* A label people read, which /pot has over its check ("Is your muse in?");
   on /kin the label is for readers only (.sr) and keeps its own rules. */
.find label:not(.sr) {
	color: var(--bone);
	font: 600 15px var(--sans);
}
/* The pill with anything beside it (/pot's Check button), and what the panel
   hangs off, so a page can put its own lines under the box. */
.find-row {
	position: relative;
	display: flex;
	gap: 8px;
}
.find input {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-hi);
	border-radius: 999px;
	background: var(--card);
	color: var(--bone);
	/* 16px: anything smaller and iOS zooms the page when it takes focus. */
	font: 400 16px var(--sans);
}
.find input::placeholder {
	color: var(--dim);
}
.find .btn {
	min-height: 44px;
}
.mf-pop {
	position: absolute;
	z-index: 3;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	min-width: min(280px, 86vw);
	max-height: min(360px, 54vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	border-radius: 16px;
	background: var(--card);
	box-shadow:
		0 0 0 1px rgba(var(--gold-rgb), 0.18),
		0 18px 44px rgba(0, 0, 0, 0.6);
}
.mf-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}
.mf-head {
	margin: 2px 0 2px 10px;
	color: var(--dim);
	font: 400 11px / 1.2 var(--sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mf-note {
	margin: 0;
	padding: 8px 10px;
	color: var(--soft);
	font: 400 13px / 1.35 var(--sans);
}
.mf-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 5px 8px;
	border-radius: 11px;
	cursor: pointer;
}
.mf-row.on {
	background: rgba(var(--gold-rgb), 0.12);
}
.mf-art {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--card-hi);
}
/* The icon on the two rows that are an action rather than a muse. */
.mf-do {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-hi);
	color: var(--gold);
}
.mf-do .i {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mf-of {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.mf-of b {
	color: var(--bone);
	font: 400 14px / 1.2 var(--sans);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mf-of small {
	color: var(--dim);
	font: 400 12px / 1.2 var(--sans);
}
.mf-chip {
	margin-left: auto;
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(var(--gold-rgb), 0.12);
	color: var(--gold-hi);
	font: 400 11px / 1.5 var(--sans);
}