/* Restrained steel surfaces; all rules stay inside the map component. */
.ecm-root {
	--ecm-ink: #262a2f;
	--ecm-muted: #626970;
	--ecm-line: #d9dde1;
	--ecm-accent: #353b42;
	color: var( --ecm-ink );
	font:
		15px/1.55 -apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	background: linear-gradient( 135deg, #fafbfc 0%, #f0f2f4 48%, #fafbfc 100% );
	border: 1px solid var( --ecm-line );
	border-radius: 2px;
	padding: clamp( 20px, 3.5vw, 40px );
	max-width: 1400px;
	margin: 24px auto;
	box-shadow:
		inset 0 1px 0 #fff,
		0 10px 35px #20283006;
	color-scheme: light;
}
.ecm-root * {
	box-sizing: border-box;
}
.ecm-root [hidden] {
	display: none !important;
}
.ecm-heading h2 {
	color: var( --ecm-ink );
	font-size: clamp( 27px, 3.5vw, 39px );
	font-weight: 550;
	letter-spacing: -0.045em;
	line-height: 1.15;
	margin: 12px 0;
}
.ecm-heading p {
	color: var( --ecm-muted );
	margin: 12px 0 28px;
	max-width: 65ch;
}
.ecm-eyebrow {
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.18em;
	color: var( --ecm-muted );
}
.ecm-toolbar,
.ecm-actions {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin: 18px 0;
}
.ecm-toolbar input {
	flex: 1;
	min-width: 180px;
}
.ecm-root button {
	font: inherit;
	font-weight: 550;
	font-size: 13px;
	line-height: 1.4;
	min-height: 42px;
	border: 1px solid #cbd0d5;
	background: linear-gradient( #fff, #e9ecef );
	color: var( --ecm-ink );
	border-radius: 2px;
	padding: 10px 15px;
	box-shadow: inset 0 1px 0 #fff;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.ecm-root button:hover {
	background: #e4e8eb;
	border-color: #aeb6be;
}
.ecm-root button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.ecm-root .ecm-primary,
.ecm-root button[type='submit'] {
	background: linear-gradient( #424951, #2d3238 );
	border-color: #353b42;
	color: #fff;
	box-shadow: inset 0 1px 0 #ffffff15;
}
.ecm-root .ecm-primary:hover,
.ecm-root button[type='submit']:hover {
	background: #252b31;
}
.ecm-root button:focus-visible,
.ecm-root input:focus-visible,
.ecm-root select:focus-visible,
.ecm-root textarea:focus-visible,
.ecm-root a:focus-visible,
.ecm-root .ecm-map:focus-visible {
	outline: 2px solid #546b82;
	outline-offset: 3px;
}
.ecm-root input,
.ecm-root select,
.ecm-root textarea {
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid #c5cbd1;
	border-radius: 2px;
	padding: 10px 12px;
	color: var( --ecm-ink );
	background: #fff;
	min-width: 0;
	max-width: 100%;
	box-shadow: inset 0 1px 2px #20283003;
}
.ecm-root input::placeholder {
	color: #747b83;
}
.ecm-layout {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 240px, 1fr );
	gap: 24px;
}
.ecm-map {
	height: 500px;
	border-radius: 2px;
	z-index: 0;
	border: 1px solid var( --ecm-line );
}
.ecm-list {
	max-height: 500px;
	overflow: auto;
	padding: 0 2px;
	scrollbar-width: thin;
	scrollbar-color: #c3c8cd transparent;
}
.ecm-count {
	margin: 0 0 12px;
	color: var( --ecm-muted );
	font-size: 12px;
}
.ecm-root .ecm-card 
{
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 5px;
	background: transparent;
	color: var( --ecm-ink );
	border: 0;
	border-bottom: 1px solid var( --ecm-line );
	border-radius: 0;
	width: 100%;
	margin: 0;
	padding: 18px 10px;
	box-shadow: none;
	border: 2px solid #fff;
    margin-bottom: 10px;
}
.ecm-root .ecm-card:hover {
	background: #ffffffa6;
}
.ecm-card strong {
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.ecm-card span {
	font-size: 13px;
	color: var( --ecm-muted );
}
.ecm-card small {
	text-transform: capitalize;
	color: #515b65;
	font-size: 11px;
	background: #e7eaed;
	border-radius: 2px;
	padding: 2px 6px;
	margin-top: 3px;
}
.ecm-details,
.ecm-form {
	background: transparent;
	border: 0;
	border-top: 1px solid var( --ecm-line );
	border-radius: 0;
	margin-top: 28px;
	padding: 28px 0 0;
	scroll-margin-top: 24px;
}
.ecm-details h3,
.ecm-form h3 {
	margin: 10px 0 18px;
	font-size: 23px;
	font-weight: 550;
	letter-spacing: -0.025em;
	color: var( --ecm-ink );
}
.ecm-form > p {
	color: var( --ecm-muted );
	font-size: 13px;
	max-width: 80ch;
}
.ecm-details img {
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
	border-radius: 2px;
}

.ecm-details dl 
{
	display: grid;
	grid-template-columns: minmax( 100px, 1fr ) 2fr;
	gap: 10px 24px;
	font-size: 14px;
	margin-bottom: 10px;
}

.ecm-details dt {
	font-weight: 550;
	color: var( --ecm-muted );
}
.ecm-details dd {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.ecm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin-bottom: 20px;
}
.ecm-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 7px 0;
	font-size: 12px;
	font-weight: 550;
}
.ecm-field input[type='checkbox'] {
	align-self: flex-start;
	accent-color: #414b56;
}
.ecm-field textarea {
	min-height: 110px;
}
.ecm-field input[type='file'] {
	padding: 10px;
	font-size: 12px;
}
.ecm-notice:not( :empty ) {
	padding: 12px 15px;
	border: 1px solid var( --ecm-line );
	border-radius: 2px;
	background: #e9edf0;
	color: #39434d;
	font-size: 13px;
}
.ecm-honey {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ecm-root .leaflet-control-attribution {
	font-size: 10px;
}
.ecm-root .leaflet-control a {
	color: #39434d;
}
.ecm-root .leaflet-container {
	font-family: inherit;
	background: #e6e9ec;
}
.ecm-root .leaflet-bar {
	border: 1px solid #cbd0d5;
	box-shadow: 0 2px 6px #20283012;
}
.ecm-place-search {
	margin: 12px 0 20px;
}
.ecm-autocomplete {
	position: relative;
	min-width: 0;
	width: 100%;
}
.ecm-autocomplete > input {
	width: 100%;
}
.ecm-autocomplete > small,
.ecm-autocomplete > a {
	display: block;
	font-size: 11px;
	font-weight: 400;
	margin: 4px 0;
	color: var( --ecm-muted );
}
.ecm-suggestions {
	position: absolute;
	top: 46px;
	left: 0;
	right: 0;
	z-index: 1001;
	background: #fff;
	border: 1px solid var( --ecm-line );
	border-radius: 2px;
	max-height: 260px;
	overflow: auto;
	box-shadow: 0 8px 20px #20283015;
}
.ecm-suggestions [role='option'] {
	padding: 12px;
	cursor: pointer;
	overflow-wrap: anywhere;
	border-bottom: 1px solid #edf0f2;
	font-weight: 400;
}
.ecm-suggestions [role='option']:hover,
.ecm-suggestions [aria-selected='true'] {
	background: #eef1f4;
}
.ecm-picker-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	margin: 14px 0;
	background: linear-gradient( 120deg, #f9fafb, #e6eaee );
	border: 1px solid var( --ecm-line );
	border-radius: 2px;
}
.ecm-picker-bar span {
	font-size: 12px;
	flex: 1;
	color: #424b55;
}
.ecm-draft-marker {
	background: linear-gradient( #59636e, #303840 );
	border: 3px solid white;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px #46515c,
		0 2px 7px #20283055;
	color: #fff;
	cursor: grab;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
}
.ecm-draft-marker:active {
	cursor: grabbing;
}
.ecm-root .ecm-form-badge {
	display: inline-block;
	background: #e7ebef;
	color: #46515c;
	padding: 5px 9px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.07em;
	margin: 0;
}
.ecm-root .ecm-form-badge-edit {
	background: #414a54;
	color: white;
}

.ecm-root .ecm-toolbar select,
.ecm-root .ecm-grid select   
{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 35px 10px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
}

@supports (appearance: base-select) {
    .ecm-root :is(.ecm-toolbar, .ecm-field) select,
    .ecm-root :is(.ecm-toolbar, .ecm-field) select::picker(select) {
        appearance: base-select;
    }

    .ecm-root :is(.ecm-toolbar, .ecm-field) select::picker-icon {
        display: none;
    }

    .ecm-root :is(.ecm-toolbar, .ecm-field) select::picker(select) {
        /* Keep the dropdown below the select. */
        top: anchor(bottom);
        bottom: auto;
        position-try-fallbacks: none;

        margin: 4px 0 0;
        max-height: 240px;
        overflow-y: auto;

        background: #fff;
        color: #333;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px;
        font-family: inherit;
        font-size: 16px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    }

    .ecm-root :is(.ecm-toolbar, .ecm-field) select option {
        padding: 10px;
        border-radius: 2px;
        cursor: pointer;
    }

    .ecm-root :is(.ecm-toolbar, .ecm-field) select option:hover,
    .ecm-root :is(.ecm-toolbar, .ecm-field) select option:focus {
        background: #eee;
    }

    .ecm-root :is(.ecm-toolbar, .ecm-field) select option:checked {
        background: #e4e4e4;
        font-weight: 600;
    }
}

@media ( max-width: 760px ) {
	.ecm-root {
		font-size: 14px;
	}
	.ecm-card strong {
		font-size: 14px;
	}
	.ecm-layout {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.ecm-map {
		height: 360px;
	}
	.ecm-list {
		max-height: 280px;
	}
	.ecm-grid {
		grid-template-columns: 1fr;
	}
	.ecm-toolbar > * {
		width: 100%;
	}
	.ecm-details,
	.ecm-form {
		padding-top: 20px;
	}
	.ecm-picker-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.ecm-root input,
	.ecm-root select,
	.ecm-root textarea {
		font-size: 14px;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.ecm-root button {
		transition: none;
	}
}

.ecm-form > button {
	margin: 4px 6px 4px 0;
}
.ecm-field-help {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --ecm-muted );
	max-width: 64ch;
}
