/**
 * Revival Filter Pills
 *
 * The archive filter row: search, sort, and one pill per filter. Each pill
 * opens its own popover; a set pill shows its value and clears itself.
 *
 * Replaces the disclosure panel. That kept every filter behind one button and
 * needed a separate chip row to say what was applied — this puts both on the
 * same control, so the row is the state.
 *
 * Three pills show at rest and the rest sit behind a Filters button. Below the
 * breakpoint none show, so the button is how you reach all of them. Same
 * markup either way; only the count of visible pills changes.
 */

 :root {
	--rv-pill-pad-x: 1.15em;
	--rv-pill-pad-y: 0.65em;
	--rv-pill-gap: var(--space-xs);
	--rv-pill-font-size: var(--rv-control-font-size-s);
	--rv-pill-border-width: var(--rv-control-border-width-s);

	--rv-pill-bg: var(--rv-control-bg);
	--rv-pill-text: var(--rv-control-muted);
	--rv-pill-border: var(--rv-control-border);
	--rv-pill-border-hover: var(--rv-control-border-hover);

	--rv-pill-set-bg: var(--rv-control-bg);
	--rv-pill-set-text: var(--primary);
	--rv-pill-set-border: var(--primary);
}

.color-scheme--alt {
	--rv-pill-set-text: var(--primary-semi-light);
	--rv-pill-set-border: var(--primary-semi-light);
}

/* ---------------------------------------------------------------------------
   Row
   --------------------------------------------------------------------------- */

.rv-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rv-pill-gap);
	inline-size: 100%;
	margin-block-start: var(--space-s);
}

/* Search keeps the width it had in the bar rather than growing to fill —
   the pills should sit beside it, not be pushed to the far edge. */
.rv-pills .rv-search {
	flex: 0 1 var(--rv-bar-search-width);
	min-inline-size: var(--rv-bar-search-min);
}

/* ---------------------------------------------------------------------------
   Pill
   --------------------------------------------------------------------------- */

/* Fixed height rather than letting content set it, so a pill sits level with
   the search field and sort control regardless of what's inside it. */
   .rv-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--rv-control-gap) * 0.5);
	block-size: var(--rv-control-height);
	padding-block: 0;

	/* Less on the trailing edge: the caret and the clear both carry their own
	   optical space, so full padding there reads as a gap. */
	padding-inline: var(--rv-pill-pad-x) calc(var(--rv-pill-pad-x) * 0.7);
	border: var(--rv-pill-border-width) var(--rv-control-border-style) var(--rv-pill-border);
	border-radius: var(--rv-control-radius);
	background: var(--rv-pill-bg);
	color: var(--rv-pill-text);
	font: inherit;
	font-size: var(--rv-pill-font-size);
	line-height: var(--rv-control-line-height);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--rv-transition), color var(--rv-transition);
}

@media (hover: hover) and (pointer: fine) {
	.rv-pill:hover {
		border-color: var(--rv-pill-border-hover);
		color: var(--rv-control-text);
	}
}

.rv-pill:focus-visible,
.rv-pill[aria-expanded="true"] {
	outline: var(--rv-focus-ring-width) solid var(--rv-focus-ring-color);
	outline-offset: var(--rv-focus-ring-offset);
}

.rv-pill svg {
	inline-size: var(--rv-icon-size-s);
	block-size: var(--rv-icon-size-s);
	flex: none;
	fill: currentColor;
}

/* Matches the caret a select draws for itself, so a pill and the sort
   control beside it read as the same kind of thing. */
.rv-pill__caret svg {
	inline-size: var(--rv-icon-size);
	block-size: var(--rv-icon-size);
}

/* The caret dims so it reads as affordance rather than content. */
.rv-pill__caret {
	opacity: 0.6;
}

/* A set pill carries its value and its own clear, which is what lets the
   chip row go away. */
.rv-pill.is-set {
	border-color: var(--rv-pill-set-border);
	background: var(--rv-pill-set-bg);
	color: var(--rv-pill-set-text);
	font-weight: var(--rv-weight-nav);
}

/* Value can run long — "1 Thessalonians 5:12-28" — so it truncates rather
   than pushing the row wider. */
.rv-pill__value {
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 12rem;
}

/* Clear sits inside the pill but is its own control, so it can't be a
   nested button — it's a span the script listens for. */
.rv-pill__clear {
	display: inline-flex;
	opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
	.rv-pill__clear:hover {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
   Popover
   --------------------------------------------------------------------------- */

/* The popover lives inside a <button>, which centres its text — so alignment
   has to be set back explicitly. Scoping the control tokens here rather than
   restyling each field keeps the popover a size smaller than the row it
   drops from. */
/* No font-size override: the combobox's own search field reads
   --rv-control-font-size-s and wasn't scoped here, so shrinking the selects
   left the two mismatched. */
   .rv-pill__pop {
	position: absolute;
	z-index: 20;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;

	/* Wide enough that a long series name doesn't wrap to four lines in the
	   combobox list. */
	min-inline-size: 16rem;
	inline-size: max-content;
	max-inline-size: min(24rem, 90vw);
	padding: var(--space-s);
	border: none;
	border-radius: var(--rv-popup-radius);
	background: var(--rv-popover-bg, var(--rv-control-bg));
	box-shadow: var(--box-shadow-l);
	text-align: start;
	white-space: normal;
	cursor: default;
	font-weight: 400;
}

.rv-pill__pop[hidden] {
	display: none;
}

/* Scripture holds two fields; every other pill holds one. */
.rv-pill__pop-fields {
	display: grid;
	grid-template-columns: repeat(var(--rv-pill-pop-cols, 1), minmax(0, 1fr));
	gap: var(--rv-pill-gap);
}

.rv-pill__pop--scripture .rv-pill__pop-fields {
	--rv-pill-pop-cols: 2;
}

.rv-pill__field {
	display: flex;
	flex-direction: column;
	gap: var(--rv-label-gap);
	min-inline-size: 0;
}

.rv-pill__field .rv-field {
	min-inline-size: 0;
}

/* ---------------------------------------------------------------------------
   State row
   --------------------------------------------------------------------------- */

/* Each pill clears itself, so the only thing left is the bulk clear — which
   sits beside the count rather than in a row of its own. */
.rv-pills__state {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rv-bar-gap);
	margin-block: var(--space-xs);
	color: var(--rv-control-muted);
	font-size: var(--text-xs);
}

/* ---------------------------------------------------------------------------
   Overflow
   --------------------------------------------------------------------------- */

/* Hidden pills are in the DOM from the start so the button only has to
   toggle a class — no fetching, no layout thrash beyond the reflow. */
.rv-pills:not(.is-expanded) .rv-pill--extra {
	display: none;
}

/* Mirrors the pill padding: the icon leads here rather than trailing, so the
   optical space it carries is on the other side. */
   .rv-pills__more {
	padding-inline: calc(var(--rv-pill-pad-x) * 0.7) var(--rv-pill-pad-x);
}

/* Once expanded, the button has done its job. */
.rv-pills.is-expanded .rv-pills__more {
	display: none;
}

/* Below the breakpoint every filter is behind the button, so the row rests
   at search, sort and Filters — and expands to stacked pills. */
   @media (max-width: 900px) {
	/* Only hide the pills when there's a button to bring them back — a row
	   with one filter and no More button would hide it with no way in. */
	.rv-pills:has(.rv-pills__more):not(.is-expanded) .rv-pill--filter {
		display: none;
	}

	.rv-pills .rv-search {
		flex: 1 0 100%;
		max-inline-size: none;
	}

	/* Fixed rather than absolute: anchored inside the pill, a popover near the
	   screen edge runs off it. This spans the viewport instead, with the
	   vertical position set by the script from the pill it belongs to. */
	   .rv-pill__pop {
		position: fixed;
		inset-inline: var(--gutter);
		inline-size: auto;
		min-inline-size: 0;
		max-inline-size: none;
	}
}