/* --- The search sheet ----------------------------------------------------
 * It rises from the bottom and leaves a strip of the page visible above it,
 * so you keep your bearings. Tapping that strip closes it.
 */

.sheet {
	position: fixed;
	inset: 0;
	z-index: var(--z-sheet);
}

.sheet__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-navy) 55%, transparent);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.sheet[data-open='true'] .sheet__scrim {
	opacity: 1;
}

.sheet__panel {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	max-height: min(86vh, 46rem);
	margin-inline: auto;
	width: min(46rem, 100%);
	background: var(--color-surface);
	transform: translateY(100%);
	transition: transform var(--speed) var(--ease);
}

.sheet[data-open='true'] .sheet__panel {
	transform: translateY(0);
}

.sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: var(--border-hair) solid var(--color-line);
}

.sheet__head .icon-btn {
	color: var(--color-navy);
}

.sheet__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-md);
	-webkit-overflow-scrolling: touch;
}

/* The footer stays put while the filters scroll, so the count and the way
   out are always in reach. */
.sheet__foot {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-md)
	         calc(var(--space-sm) + env(safe-area-inset-bottom));
	border-top: var(--border-hair) solid var(--color-line);
	background: var(--color-surface);
}

.sheet__clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-navy-soft);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
}

.sheet__clear:hover {
	color: var(--color-navy);
}

.sheet__count {
	text-align: center;
	font-size: var(--text-sm);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy);
}

.sheet__count .is-loading {
	opacity: 0.4;
}

.sheet__count .rule {
	margin-block: var(--space-3xs) 0;
}

/* --- Free text ------------------------------------------------------------ */

.filter-search {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-sm);
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	color: var(--color-navy-soft);
	margin-bottom: var(--space-sm);
}

.filter-search input {
	flex: 1;
	min-width: 0;
	padding: var(--space-2xs) 0;
	border: 0;
	background: none;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--color-ink);
}

.filter-search input:focus {
	outline: none;
}

/* --- Sections -------------------------------------------------------------
 * Everything is folded away by default apart from the first. With five
 * groups open at once the sheet becomes a scroll with no shape to it.
 */

.filter-section {
	border-top: var(--border-hair) solid var(--color-line);
}

.filter-section:first-of-type {
	border-top: 0;
}

.filter-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-sm) 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy);
	text-align: left;
}

.filter-section__title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
}

/* Shows how many choices a folded section is holding. */
.filter-section__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--color-navy-mid);
	color: var(--color-surface);
	font-size: var(--text-xs);
	letter-spacing: 0;
}

.filter-section__chevron {
	width: 8px;
	height: 8px;
	border-right: var(--border-hair) solid var(--color-navy-soft);
	border-bottom: var(--border-hair) solid var(--color-navy-soft);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--speed-fast) var(--ease);
}

.filter-section[data-open='true'] .filter-section__chevron {
	transform: rotate(-135deg) translateY(-2px);
}

.filter-section__body {
	display: none;
	padding-bottom: var(--space-md);
}

.filter-section[data-open='true'] .filter-section__body {
	display: block;
}

/* --- Chips ---------------------------------------------------------------- */

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chip span {
	display: inline-block;
	padding: 0.55rem 0.95rem;
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	color: var(--color-ink);
	cursor: pointer;
	transition: background var(--speed-fast) var(--ease),
	            border-color var(--speed-fast) var(--ease),
	            color var(--speed-fast) var(--ease);
}

.chip input:checked + span {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-surface);
}

.chip input:focus-visible + span {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

/* --- Ranges --------------------------------------------------------------- */

.filter-label {
	margin: 0 0 var(--space-2xs);
}

.filter-label + .filter-range,
.filter-label + .filter-steps {
	margin-bottom: var(--space-md);
}

.filter-range,
.filter-steps {
	display: flex;
	align-items: flex-end;
	gap: var(--space-sm);
}

.filter-range label,
.filter-steps label {
	flex: 1;
	min-width: 0;
}

.filter-range__label,
.filter-steps span {
	display: block;
	margin-bottom: var(--space-3xs);
	font-size: var(--text-xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.filter-range__field {
	display: flex;
	align-items: center;
	gap: 0.2em;
	padding: 0.55rem 0.75rem;
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	color: var(--color-navy-soft);
}

.filter-range__field input,
.filter-steps input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--color-ink);
}

.filter-steps input {
	padding: 0.55rem 0.75rem;
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
}

.filter-range__field input:focus,
.filter-steps input:focus {
	outline: none;
}

.filter-range__dash {
	padding-bottom: 0.85rem;
	color: var(--color-navy-soft);
}

@media (max-width: 40rem) {
	.sheet__panel {
		max-height: 88vh;
	}

	.sheet__foot {
		grid-template-columns: 1fr;
		gap: var(--space-2xs);
		text-align: center;
	}

	.sheet__clear {
		order: 3;
		padding-top: var(--space-2xs);
	}

	.sheet__submit {
		width: 100%;
	}
}

/* --- Charter or for sale ---------------------------------------------------
 * Two quite different searches — a weekly rate against an asking price — so
 * the choice comes first and everything below answers to it.
 */

.filter-listing {
	display: flex;
	gap: 0;
	margin-bottom: var(--space-md);
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	overflow: hidden;
}

.filter-listing__option {
	flex: 1;
}

.filter-listing__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.filter-listing__option span {
	display: block;
	padding: 0.7rem 1rem;
	text-align: center;
	font-size: var(--text-sm);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
	cursor: pointer;
	transition: background var(--speed-fast) var(--ease),
	            color var(--speed-fast) var(--ease);
}

.filter-listing__option input:checked + span {
	background: var(--color-navy);
	color: var(--color-surface);
}

.filter-listing__option input:focus-visible + span {
	outline: 2px solid var(--color-navy);
	outline-offset: -2px;
}