/**
 * Starlings Club Finder
 *
 * Link styling is reset inside the plugin's own components, since a theme that
 * underlines every link in blue turns buttons, cards and chips into a wall of
 * underlines when those elements already carry their own affordance.
 *
 * One set of markup, three views. data-view controls whether the map shows,
 * data-render controls whether results read as rows or cards. Typography is
 * inherited from the theme; everything rebrandable is a custom property.
 */

.scf {
	--scf-marker: #0f5179;
	--scf-accent: #fcce33;
	--scf-ink: #14202c;
	--scf-muted: #5f6b7a;
	--scf-rule: #e2e6ec;
	--scf-surface: #fff;
	--scf-surface-alt: #f5f7f9;
	--scf-radius: 10px;
	--scf-radius-sm: 7px;
	--scf-shadow: 0 1px 2px rgba(16, 30, 46, .06), 0 8px 24px rgba(16, 30, 46, .08);
	--scf-map-height: 560px;

	color: var(--scf-ink);
	position: relative;
}

.scf *,
.scf *::before,
.scf *::after {
	box-sizing: border-box;
}

.scf :is(.scf-btn, .scf-icon-link, .scf-item-name a, .scf-state-link,
	.scf-popup-link, .scf-map-btn) {
	text-decoration: none;
	box-shadow: none;
}

.scf .scf-item-name a:hover,
.scf .scf-state-link:hover .scf-state-name {
	text-decoration: underline;
}

.scf .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Filters
   ------------------------------------------------------------------------ */

.scf-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.65rem 0.75rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--scf-rule);
}

.scf-control {
	flex: 0 0 auto;
	min-width: 0;
}

.scf-control-search {
	flex: 1 1 15rem;
	max-width: 24rem;
}

.scf-control-state,
.scf-control-region {
	flex: 0 1 12rem;
}

.scf-control > label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--scf-muted);
}

.scf-search,
.scf-state,
.scf-region {
	width: 100%;
	padding: 0.6rem 0.8rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--scf-ink);
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.scf-search:focus,
.scf-state:focus,
.scf-region:focus {
	border-color: var(--scf-marker);
	box-shadow: 0 0 0 3px rgba(15, 81, 121, .14);
	outline: none;
}

.scf-near {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--scf-ink);
	cursor: pointer;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius-sm);
	transition: border-color .15s ease, color .15s ease;
}

.scf-near:hover,
.scf-near.is-on {
	color: var(--scf-marker);
	border-color: var(--scf-marker);
}

.scf-near[disabled] {
	cursor: progress;
	opacity: .6;
}

/* Toolbar and view switch
   ------------------------------------------------------------------------ */

.scf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.85rem 0;
}

.scf-count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--scf-muted);
}

.scf-toolbar-right {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}

.scf-reset {
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--scf-muted);
	cursor: pointer;
	background: none;
	border: 0;
	text-decoration: underline;
}

.scf-reset:hover {
	color: var(--scf-ink);
}

.scf-views {
	display: inline-flex;
	padding: 3px;
	background: var(--scf-surface-alt);
	border-radius: 999px;
}

.scf-view {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.85rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--scf-muted);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 999px;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.scf-view:hover {
	color: var(--scf-ink);
}

.scf-view.is-active {
	color: var(--scf-ink);
	background: var(--scf-surface);
	box-shadow: 0 1px 3px rgba(16, 30, 46, .14);
}

.scf-view svg {
	flex: 0 0 auto;
}

.scf :is(button, a, input, select):focus-visible {
	outline: 2px solid var(--scf-marker);
	outline-offset: 2px;
}

/* Map
   ------------------------------------------------------------------------ */

.scf-map-panel {
	position: relative;
	overflow: hidden;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius);
	box-shadow: 0 1px 2px rgba(16, 30, 46, .04);
}

.scf-map {
	width: 100%;
	height: var(--scf-map-height);
	min-height: 300px;
	background: var(--scf-surface-alt);
}

.scf-map-empty {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 500;
	margin: 0;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	color: var(--scf-muted);
	background: var(--scf-surface);
	border-radius: 999px;
	box-shadow: var(--scf-shadow);
	transform: translate(-50%, -50%);
}

.scf[data-view="list"] .scf-map-panel,
.scf[data-view="cards"] .scf-map-panel,
.scf[data-view="list"] .scf-under-toggle,
.scf[data-view="cards"] .scf-under-toggle {
	display: none;
}

/* Below the map switch
   ------------------------------------------------------------------------ */

.scf-under-toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 1rem 0 0.25rem;
}

.scf-under-label {
	margin-right: 0.15rem;
	font-size: 0.8125rem;
	color: var(--scf-muted);
}

.scf-under-btn {
	padding: 0.3rem 0.7rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--scf-muted);
	cursor: pointer;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: color .15s ease, border-color .15s ease;
}

.scf-under-btn.is-active {
	color: var(--scf-ink);
	border-color: var(--scf-rule);
}

/* Results, shared
   ------------------------------------------------------------------------ */

.scf-results {
	margin-top: 1rem;
}

.scf-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scf-item[hidden] {
	display: none;
}

.scf-item-inner {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.scf-item-media {
	flex: 0 0 auto;
}

.scf-item-media img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.scf-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.scf-item-name {
	margin: 0 0 0.15rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.scf-item-name a {
	color: inherit;
	text-decoration: none;
}

.scf-item-name a:hover {
	text-decoration: underline;
}

.scf-item-place {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	color: var(--scf-muted);
}

.scf-item-distance {
	font-weight: 600;
	color: var(--scf-ink);
}

.scf-item-flag {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--scf-ink);
	background: var(--scf-accent);
	border-radius: 999px;
}

.scf-item-season {
	margin: 0 0 0.45rem;
	font-size: 0.875rem;
	line-height: 1.5;
	max-width: 58ch;
}

.scf-item-contact {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 0.875rem;
	color: var(--scf-muted);
	list-style: none;
}

.scf-item-contact li + li {
	margin-top: 0.1rem;
}

.scf-item-contact a {
	color: inherit;
}

.scf-item-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.scf-btn {
	display: inline-block;
	padding: 0.42rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--scf-marker);
	text-decoration: none;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius-sm);
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.scf-btn:hover {
	border-color: var(--scf-marker);
}

.scf-btn-primary {
	color: #fff;
	background: var(--scf-club, var(--scf-marker));
	border-color: transparent;
}

.scf-btn-primary:hover {
	color: #fff;
	filter: brightness(1.12);
}

.scf-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--scf-muted);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius-sm);
	transition: color .15s ease, border-color .15s ease;
}

.scf-icon-link:hover {
	color: var(--scf-marker);
	border-color: var(--scf-marker);
}

.scf-no-results,
.scf-empty-state {
	margin: 1.25rem 0;
	padding: 1.5rem;
	font-size: 0.9375rem;
	color: var(--scf-muted);
	text-align: center;
	background: var(--scf-surface-alt);
	border-radius: var(--scf-radius);
}

/* List rendering, as a table
   ------------------------------------------------------------------------ */

.scf {
	--scf-cols: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(0, auto);
}

.scf-list-head {
	display: none;
	grid-template-columns: var(--scf-cols);
	gap: 0 1rem;
	align-items: center;
	padding: 0 0.85rem;
	border-bottom: 1px solid var(--scf-rule);
}

.scf[data-render="list"] .scf-results .scf-list-head {
	display: grid;
}

.scf-col {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0;
	font: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--scf-muted);
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.scf-col-plain {
	cursor: default;
}

.scf-col svg {
	opacity: .35;
	transition: opacity .15s ease;
}

.scf-col:hover {
	color: var(--scf-ink);
}

.scf-col:hover svg {
	opacity: .7;
}

.scf-col[aria-sort="ascending"] {
	color: var(--scf-ink);
}

.scf-col[aria-sort="ascending"] svg {
	opacity: 1;
	color: var(--scf-marker);
}

.scf[data-render="list"] .scf-results .scf-item {
	border-bottom: 1px solid var(--scf-rule);
}

.scf[data-render="list"] .scf-results .scf-item-inner {
	display: grid;
	grid-template-columns: var(--scf-cols);
	gap: 0 1rem;
	align-items: center;
	padding: 0.7rem 0.85rem;
	border-left: 3px solid transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

/* The body wrapper steps out of the way so its children become cells of the
   row rather than one blob in the first column. */
.scf[data-render="list"] .scf-results .scf-item-body {
	display: contents;
}

.scf[data-render="list"] .scf-results .scf-item-detail,
.scf[data-render="list"] .scf-results .scf-item-media {
	display: none;
}

.scf[data-render="list"] .scf-results .scf-item-name {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: 0.9375rem;
}

.scf[data-render="list"] .scf-results .scf-item-place {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 0.875rem;
}

.scf[data-render="list"] .scf-results .scf-item-flag {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	margin: 0.2rem 0 0;
}

.scf[data-render="list"] .scf-results .scf-item-actions {
	grid-column: 3;
	grid-row: 1 / span 2;
	justify-content: flex-end;
}

.scf[data-view="map"][data-render="list"] .scf-results .scf-item.is-mappable .scf-item-inner {
	cursor: pointer;
}

.scf[data-view="map"][data-render="list"] .scf-results .scf-item.is-mappable:hover .scf-item-inner {
	background: var(--scf-surface-alt);
}

.scf[data-render="list"] .scf-results .scf-item.is-active .scf-item-inner {
	background: var(--scf-surface-alt);
	border-left-color: var(--scf-club, var(--scf-marker));
}

/* Below the column widths the row stacks, with the action dropping under the
   name rather than being squeezed into a sliver. */
@media (max-width: 700px) {
	.scf[data-render="list"] .scf-results .scf-list-head {
		display: none;
	}

	.scf[data-render="list"] .scf-results .scf-item-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
		padding: 0.85rem;
	}

	.scf[data-render="list"] .scf-results .scf-item-name,
	.scf[data-render="list"] .scf-results .scf-item-place,
	.scf[data-render="list"] .scf-results .scf-item-flag,
	.scf[data-render="list"] .scf-results .scf-item-actions {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
	}

	.scf[data-render="list"] .scf-results .scf-item-actions {
		margin-top: 0.45rem;
	}
}

/* Card rendering
   ------------------------------------------------------------------------ */

.scf[data-render="cards"] .scf-results .scf-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 1rem;
}

.scf[data-render="cards"] .scf-results .scf-item-inner {
	flex-direction: column;
	height: 100%;
	padding: 1.15rem;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.scf[data-view="map"][data-render="cards"] .scf-results .scf-item.is-mappable .scf-item-inner {
	cursor: pointer;
}

.scf[data-render="cards"] .scf-results .scf-item.is-mappable:hover .scf-item-inner {
	border-color: #cfd6df;
	box-shadow: var(--scf-shadow);
	transform: translateY(-2px);
}

.scf[data-render="cards"] .scf-results .scf-item.is-active .scf-item-inner {
	border-color: var(--scf-club, var(--scf-marker));
	box-shadow: 0 0 0 1px var(--scf-club, var(--scf-marker));
}

.scf[data-render="cards"] .scf-results .scf-item-media img {
	width: 48px;
	height: 48px;
}

.scf[data-render="cards"] .scf-results .scf-item-actions {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Markers
   ------------------------------------------------------------------------ */

.scf-marker {
	transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}

.scf-pin {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--scf-marker);
	border: 2.5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(16, 30, 46, .35);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease;
}

/* Not open yet: hollow, so the map separates somewhere you can join today from
   somewhere that is coming. */
.scf-marker.is-soon .scf-pin {
	background: #fff;
	border-color: var(--scf-marker);
	box-shadow: 0 1px 4px rgba(16, 30, 46, .25);
}

.leaflet-marker-icon:hover .scf-pin {
	transform: scale(1.25);
}

.scf-marker.is-selected {
	z-index: 1000 !important;
}

.scf-marker.is-selected .scf-pin {
	transform: scale(1.45);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 4px 14px rgba(16, 30, 46, .4);
}

/* Clusters.
   MarkerCluster.css carries the animations only. The circles, sizing and
   colours live in MarkerCluster.Default.css, which is deliberately not loaded,
   so all of the visual side is defined here and stays on brand. */

.marker-cluster {
	background: rgba(255, 255, 255, .55);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(16, 30, 46, .2);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}

.marker-cluster:hover {
	transform: scale(1.08);
}

.marker-cluster div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 4px;
	font: 700 13px/1 inherit;
	color: #fff;
	background: var(--scf-marker);
	border-radius: 50%;
}

.marker-cluster span {
	display: block;
	line-height: 1;
}

.marker-cluster-medium div {
	width: 38px;
	height: 38px;
	margin: 1px;
	font-size: 14px;
}

.marker-cluster-large div {
	width: 40px;
	height: 40px;
	margin: 0;
	font-size: 15px;
}

/* Desktop popup
   ------------------------------------------------------------------------ */

.scf-popup .leaflet-popup-content-wrapper {
	padding: 0;
	background: var(--scf-surface);
	border-radius: var(--scf-radius);
	box-shadow: var(--scf-shadow);
}

.scf-popup .leaflet-popup-content {
	width: 300px !important;
	margin: 0;
	padding: 1.05rem;
	line-height: inherit;
}

.scf-popup .leaflet-popup-tip {
	box-shadow: var(--scf-shadow);
}

.scf-popup .scf-item-inner {
	flex-direction: column;
	gap: 0.75rem;
}

.scf-popup .scf-item-media img {
	width: 44px;
	height: 44px;
}

.scf-popup .leaflet-popup-close-button {
	width: 30px;
	height: 30px;
	padding: 6px 0 0;
	font-size: 20px;
	color: var(--scf-muted);
}

/* Mobile sheet
   ------------------------------------------------------------------------ */

.scf-sheet {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9000;
	padding: 0 0.6rem 0.6rem;
	pointer-events: none;
}

.scf-sheet[hidden] {
	display: none;
}

.scf-sheet-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
	padding: 0 1.1rem 1.1rem;
	pointer-events: auto;
	background: var(--scf-surface);
	border-radius: 16px 16px 12px 12px;
	box-shadow: 0 -2px 10px rgba(16, 30, 46, .1), 0 12px 32px rgba(16, 30, 46, .22);
	transform: translateY(110%);
	transition: transform .28s cubic-bezier(.2, .85, .3, 1);
}

.scf-sheet.is-open .scf-sheet-inner {
	transform: translateY(0);
}

.scf-sheet.is-dragging .scf-sheet-inner {
	transition: none;
}

.scf-sheet-grip {
	grid-column: 2;
	width: 38px;
	height: 4px;
	margin: 0 auto;
	background: var(--scf-rule);
	border-radius: 999px;
}

.scf-sheet-close {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	float: none;
	font: inherit;
	color: var(--scf-muted);
	cursor: pointer;
	background: var(--scf-surface-alt);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	touch-action: manipulation;
}

.scf-sheet-close:hover,
.scf-sheet-close:focus,
.scf-sheet-close:active {
	color: var(--scf-ink);
	background: var(--scf-rule);
	transform: none;
}

.scf-sheet .scf-item-inner {
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	transform: none;
}

.scf-sheet-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.9rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--scf-rule);
}

.scf-sheet-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--scf-ink);
	cursor: pointer;
	background: var(--scf-surface-alt);
	border: 0;
	border-radius: 50%;
}

.scf-sheet-nav button[disabled] {
	color: var(--scf-rule);
	cursor: default;
}

.scf-sheet-position {
	font-size: 0.8125rem;
	color: var(--scf-muted);
}

/* Coming soon list
   ------------------------------------------------------------------------ */

.scf-soon-heading {
	margin: 0 0 0.75rem;
}

.scf-soon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scf-soon-item {
	font-size: 1rem;
	font-weight: 600;
}

/* Small screens
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
	.scf {
		--scf-map-height: 62vh;
	}

	.scf-controls {
		gap: 0.5rem;
	}

	.scf-control-state,
	.scf-control-region {
		flex: 1 1 45%;
	}

	.scf-toolbar {
		margin: 0.85rem 0 0.7rem;
	}

	.scf-toolbar-right {
		width: 100%;
	}

	.scf-views {
		flex: 1 1 auto;
	}

	.scf-view {
		flex: 1 1 33%;
		justify-content: center;
	}

	.scf-map-panel {
		border-radius: var(--scf-radius);
	}

	.scf[data-render="cards"] .scf-results .scf-list {
		grid-template-columns: 1fr;
	}

	/* A tapped pin opens the sheet, so the map keeps the full screen. */
	.scf[data-view="map"].has-sheet .scf-results {
		padding-bottom: 30vh;
	}
}

@media (min-width: 861px) {
	.scf-sheet {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scf *,
	.scf *::before,
	.scf *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Show on map control
   ------------------------------------------------------------------------ */

.scf-map-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--scf-marker);
	cursor: pointer;
}

/* Redundant inside a surface that is already the map detail. */
.scf-popup .scf-map-btn,
.scf-sheet .scf-map-btn {
	display: none;
}

/* Hidden when there is no map to show, so list and card views stay clean. */
.scf[data-view="list"] .scf-map-btn,
.scf[data-view="cards"] .scf-map-btn {
	display: none;
}


/* Filter chips
   ------------------------------------------------------------------------ */

.scf-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.85rem;
}

.scf-chips[hidden] {
	display: none;
}

.scf-chips-label {
	font-size: 0.8125rem;
	color: var(--scf-muted);
}

.scf-chips-list {
	display: contents;
}

.scf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem 0.25rem 0.7rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--scf-ink);
	cursor: pointer;
	background: var(--scf-surface-alt);
	border: 1px solid var(--scf-rule);
	border-radius: 999px;
	transition: border-color .15s ease, color .15s ease;
}

.scf-chip:hover {
	color: var(--scf-marker);
	border-color: var(--scf-marker);
}

.scf-chip svg {
	flex: 0 0 auto;
	opacity: .6;
}

.scf-chip:hover svg {
	opacity: 1;
}

/* Sort control
   ------------------------------------------------------------------------ */

.scf-control-sort .scf-sort {
	width: auto;
	padding: 0.35rem 1.6rem 0.35rem 0.6rem;
	font-size: 0.8125rem;
}

.scf-near[aria-pressed="true"] {
	color: #fff;
	background: var(--scf-marker);
	border-color: var(--scf-marker);
}

/* State headings in the grouped list
   ------------------------------------------------------------------------ */

.scf-group {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0.5rem 0.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--scf-muted);
	background: var(--scf-surface);
	border-bottom: 1px solid var(--scf-rule);
}

.scf[data-render="cards"] .scf-results .scf-group {
	display: none;
}

/* Sheet header owns the drag, and no longer scrolls with the content
   ------------------------------------------------------------------------ */

.scf-sheet-head {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.5rem 0 0.4rem;
	touch-action: none;
	cursor: grab;
}

.scf-sheet-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 0 0.35rem;
}

/* Browse by state
   ------------------------------------------------------------------------ */

.scf-states {
	display: grid;
	grid-template-columns: repeat(var(--scf-state-cols, 4), minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scf-state-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--scf-ink);
	text-decoration: none;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: var(--scf-radius-sm);
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.scf-state-link:hover {
	color: var(--scf-marker);
	border-color: var(--scf-marker);
	transform: translateY(-1px);
}

.scf-state-count {
	flex: 0 0 auto;
	min-width: 1.6rem;
	padding: 0.05rem 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	color: var(--scf-muted);
	background: var(--scf-surface-alt);
	border-radius: 999px;
}

.scf-state-link:hover .scf-state-count {
	color: var(--scf-marker);
}

/* Figures band
   ------------------------------------------------------------------------ */

.scf-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	margin: 0;
}

.scf-stat-value {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--scf-marker);
}

.scf-stat-label {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--scf-muted);
}

@media (max-width: 700px) {
	.scf-states {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scf-stats {
		gap: 1rem 2rem;
	}
}


/* Leaflet chrome
   ------------------------------------------------------------------------ */

.scf .leaflet-container {
	font: inherit;
}

.scf .leaflet-bar {
	border: 0;
	border-radius: var(--scf-radius-sm);
	box-shadow: 0 1px 3px rgba(16, 30, 46, .18);
	overflow: hidden;
}

.scf .leaflet-bar a,
.scf .leaflet-bar a:hover {
	width: 32px;
	height: 32px;
	line-height: 30px;
	color: var(--scf-ink);
	text-decoration: none;
	background: var(--scf-surface);
	border-bottom-color: var(--scf-rule);
}

.scf .leaflet-bar a:hover {
	color: var(--scf-marker);
	background: var(--scf-surface-alt);
}

.scf .leaflet-control-attribution {
	padding: 0 6px;
	font-size: 10px;
	color: var(--scf-muted);
	background: rgba(255, 255, 255, .8);
}

.scf .leaflet-control-attribution a {
	color: var(--scf-muted);
	text-decoration: none;
}

/* The Ukraine flag Leaflet appends to its own credit is not ours to editorialise
   with, but it does not belong in a club directory's chrome either. */
.scf .leaflet-attribution-flag {
	display: none !important;
}


/* Detail surfaces
   ------------------------------------------------------------------------
   The popup and the sheet clone an item, so they need their own layout rather
   than inheriting whatever the results area is doing. Everything shows here:
   this is the surface someone opened deliberately. */

.scf-popup .scf-item-inner,
.scf-sheet .scf-item-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	transform: none;
	cursor: default;
}

.scf-popup .scf-item-detail,
.scf-sheet .scf-item-detail {
	display: block;
}

.scf-popup .scf-item-body,
.scf-sheet .scf-item-body {
	display: block;
}

.scf-popup .scf-item-name,
.scf-sheet .scf-item-name {
	grid-column: auto;
	grid-row: auto;
	margin: 0 0 0.15rem;
	font-size: 1.125rem;
}

.scf-popup .scf-item-place,
.scf-sheet .scf-item-place {
	grid-column: auto;
	grid-row: auto;
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	text-align: left;
}

.scf-popup .scf-item-flag,
.scf-sheet .scf-item-flag {
	grid-column: auto;
	grid-row: auto;
	margin: 0 0 0.6rem;
}

.scf-popup .scf-item-media,
.scf-sheet .scf-item-media {
	display: block;
}

.scf-popup .scf-item-media img,
.scf-sheet .scf-item-media img {
	width: 44px;
	height: 44px;
}

/* Contact rows carry an icon and a real tap target on both surfaces. */
.scf-popup .scf-item-contact,
.scf-sheet .scf-item-contact {
	display: grid;
	gap: 0.1rem;
	margin: 0 0 0.75rem;
	padding: 0.6rem 0 0;
	border-top: 1px solid var(--scf-rule);
}

.scf-popup .scf-item-contact li,
.scf-sheet .scf-item-contact li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.3rem 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.scf-sheet .scf-item-contact li {
	padding: 0.45rem 0;
}

.scf-popup .scf-item-contact a,
.scf-sheet .scf-item-contact a {
	color: var(--scf-marker);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.scf-item-contact-icon {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--scf-marker);
	background: var(--scf-surface-alt);
	border-radius: 7px;
}

.scf-popup .scf-item-contact-icon,
.scf-sheet .scf-item-contact-icon {
	display: flex;
}

/* Actions become full width on the sheet, since that is the reason someone
   tapped the pin. */
.scf-popup .scf-item-actions,
.scf-sheet .scf-item-actions {
	grid-column: auto;
	grid-row: auto;
	justify-content: flex-start;
	gap: 0.45rem;
}

.scf-sheet .scf-item-actions .scf-btn-primary {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	text-align: center;
}

.scf-popup .scf-btn-primary,
.scf-sheet .scf-btn-primary {
	/* The title is a link too, but a link is not an obvious tap target on a
	   phone. This is the one that reads as the way forward. */
	text-decoration: none;
}

.scf-popup .scf-btn-primary {
	display: block;
	width: 100%;
	padding: 0.6rem 1rem;
	text-align: center;
}

/* The visitor's own position
   ------------------------------------------------------------------------ */

.scf-origin-dot {
	display: block;
	width: 100%;
	height: 100%;
	background: #1a73e8;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(26, 115, 232, .5), 0 2px 6px rgba(16, 30, 46, .35);
}

.scf .scf-origin-ring {
	fill: #1a73e8;
	fill-opacity: .06;
	stroke: #1a73e8;
	stroke-opacity: .35;
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

/* Radius control
   ------------------------------------------------------------------------ */

.scf-control-radius[hidden] {
	display: none;
}

.scf-control-radius .scf-radius {
	width: auto;
	min-width: 8.5rem;
}

/* Result note
   ------------------------------------------------------------------------ */

.scf-note {
	margin: 0.85rem 0 0;
	padding: 0.65rem 0.85rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--scf-ink);
	background: var(--scf-surface-alt);
	border-left: 3px solid var(--scf-marker);
	border-radius: 0 var(--scf-radius-sm) var(--scf-radius-sm) 0;
}

.scf-note[hidden] {
	display: none;
}

/* Two finger hint
   ------------------------------------------------------------------------ */

.scf-map-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 600;
	margin: 0;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: rgba(20, 32, 44, .8);
	border-radius: 999px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.scf-map-hint[hidden] {
	display: none;
}

/* Show all
   ------------------------------------------------------------------------ */

.scf-more-wrap {
	margin: 0.85rem 0 0;
	text-align: center;
}

.scf-more-wrap[hidden] {
	display: none;
}

.scf-more {
	padding: 0.6rem 1.2rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--scf-marker);
	cursor: pointer;
	background: var(--scf-surface);
	border: 1px solid var(--scf-rule);
	border-radius: 999px;
	transition: border-color .15s ease;
}

.scf-more:hover {
	border-color: var(--scf-marker);
}