/**
 * Page styles — genie-layers. Loaded only on that page.
 *
 * Generated from the inline styles the templates used to carry. Values are
 * design tokens (site-tokens.css). Loaded after style.css.
 */

.layer-map__terrain {
	position:absolute;
	inset:0;
	background-image:linear-gradient(var(--site-white-alpha-4) 1px,transparent 1px),linear-gradient(90deg,var(--site-white-alpha-4) 1px,transparent 1px);
	background-size:24px 24px;
}

.layer-map__road--west {
	position:absolute;
	background:var(--site-white-alpha-7);
	top:0;
	bottom:0;
	width:5px;
	left:38%;
}

.layer-map__road--east {
	position:absolute;
	background:var(--site-white-alpha-7);
	top:0;
	bottom:0;
	width:4px;
	left:62%;
}

.layer-map__road--north {
	position:absolute;
	background:var(--site-white-alpha-10);
	left:0;
	right:0;
	height:5px;
	top:42%;
}

.layer-map__road--south {
	position:absolute;
	background:var(--site-white-alpha-7);
	left:0;
	right:0;
	height:4px;
	top:67%;
}

.layer-map__divider {
	height:1px;
	background:var(--site-white-alpha-7);
}

.layer-map {
	position:relative;
	height:260px;
	background:var(--site-navy-18);
	overflow:hidden;
}

.layer-map__view-option {
	font-size:8px;
	color:var(--site-navy-35);
	text-align:center;
	cursor:pointer;
}

.layer-map__view-option--active {
	font-weight:600;
	color:var(--site-teal);
	background:var(--site-teal-alpha-15);
	border:1px solid var(--site-teal-alpha-30);
	border-radius:4px;
	padding:4px 6px;
}

.layer-map__area-label--flood {
	position:absolute;
	top:18%;
	left:56%;
	background:var(--site-success-alpha-85);
	color:var(--site-white);
	font-size:8px;
	font-weight:700;
	padding:3px 8px;
	border-radius:4px;
	white-space:nowrap;
}

.layer-map__area-label--neighborhood {
	position:absolute;
	top:28%;
	left:18%;
	background:var(--site-teal-alpha-85);
	color:var(--site-white);
	font-size:8px;
	font-weight:700;
	padding:3px 8px;
	border-radius:4px;
	white-space:nowrap;
}

.layer-map__popup {
	position:absolute;
	background:var(--site-white);
	border-radius:7px;
	padding:5px 9px;
	box-shadow:0 2px 12px var(--site-black-alpha-40);
	white-space:nowrap;
	transform:translateX(-50%);
	top:35%;
	left:45%;
}

.layer-map__swatch--air-quality {
	width:12px;
	height:8px;
	border-radius:2px;
	background:var(--site-success-alpha-40);
	flex-shrink:0;
}

.layer-map__swatch--flood {
	width:12px;
	height:8px;
	border-radius:2px;
	background:var(--site-success-alpha-50);
	flex-shrink:0;
}

.layer-map__swatch--neighborhoods {
	width:12px;
	height:8px;
	border-radius:2px;
	background:var(--site-teal-alpha-50);
	flex-shrink:0;
}

.layer-map__swatch--parcels {
	width:12px;
	height:8px;
	border-radius:2px;
	background:var(--site-text-muted-alpha-40);
	flex-shrink:0;
}

.pack-library__upload {
	background:var(--site-bg-subtle);
	border:2px dashed var(--site-border);
	border-radius:8px;
	padding:11px 13px;
	text-align:center;
}


.layer-map__toggle {
	margin-left:auto;
	width:20px;
	height:10px;
	border-radius:5px;
	background:var(--site-teal);
}

.layer-map__toggle--off {
	background:var(--site-navy-mid);
	border:1px solid var(--site-navy-27);
}


.layer-map__pin--listing {
	position:absolute;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--site-success);
	border:2px solid var(--site-white);
	transform:translate(-50%,-50%);
	top:38%;
	left:58%;
}

.layer-map__pin--selected {
	position:absolute;
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--site-teal);
	border:2px solid var(--site-white);
	transform:translate(-50%,-50%);
	top:50%;
	left:45%;
	box-shadow:0 0 0 4px var(--site-teal-alpha-30);
}

.layer-map__pin--parcel {
	position:absolute;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--site-slate-47);
	border:2px solid var(--site-white);
	transform:translate(-50%,-50%);
	top:60%;
	left:32%;
}

.pack-library__tag {
	font-size:8px;
	background:var(--site-bg-subtle);
	color:var(--site-text-muted);
	padding:2px 7px;
	border-radius:999px;
}

.pack-library__tag--source {
	background:var(--site-teal);
	color:var(--site-white);
	font-weight:600;
}


.pack-library__pack-head {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:3px;
}

.pack-library__tags {
	display:flex;
	gap:4px;
	margin-top:5px;
}


.layer-map__layer {
	display:flex;
	align-items:center;
	gap:5px;
	font-size:8px;
	color:var(--site-slate-47);
}

.layer-map__layer--off {
	color:var(--site-navy-35);
}

.layer-map__panel {
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	width:110px;
	background:var(--site-navy-deep);
	border-left:1px solid var(--site-white-alpha-8);
	padding:10px;
	display:flex;
	flex-direction:column;
	gap:7px;
}

.layer-map__panel-title {
	font-size:8px;
	font-weight:700;
	color:var(--site-navy-35);
	letter-spacing:.06em;
	text-transform:uppercase;
	margin-bottom:2px;
}

.pack-library__upload-label {
	font-size:9px;
	font-weight:600;
	color:var(--site-text-muted);
}

.h-card-body--map {
	padding:0;
}

.map-dot--listing-north {
	top:35%;
	left:55%;
	background:var(--site-slate-47);
}

.map-dot--selected {
	top:45%;
	left:42%;
}

.map-dot--listing-east {
	top:55%;
	left:58%;
	background:var(--site-success);
}

.map-layer-swatch--neighborhoods {
	background:var(--site-teal);
	opacity:.5;
}

.map-layer-swatch--air-quality {
	background:var(--site-success);
	opacity:.5;
}

.map-layer-swatch--flood {
	background:var(--site-success);
	opacity:.5;
}

.map-layer-swatch--parcels {
	background:var(--site-text-muted);
	opacity:.5;
}

.map-popup--selected {
	top:30%;
	left:42%;
}

.map-road--avenue-west {
	left:35%;
}

.map-road--avenue-east {
	left:62%;
}

.map-road--cross-north {
	top:40%;
}

.map-road--cross-south {
	top:65%;
}

.pack-tiers__tier {
	background:var(--site-bg-subtle);
	border:1px solid var(--site-border);
	border-radius:10px;
	padding:14px;
	text-align:center;
}

.pack-tiers__tier--featured {
	background:var(--site-teal-bg);
	border:1px solid var(--site-teal-border);
}



.pack-tiers__name {
	font-size:10px;
	font-weight:700;
	color:var(--site-text-muted);
	text-transform:uppercase;
	letter-spacing:.05em;
	margin:4px 0 6px;
}

.pack-tiers__name--featured {
	color:var(--site-teal);
}

.pack-tiers__desc {
	font-size:11px;
	color:var(--site-text-sec);
}

.pack-tiers__price {
	font-size:20px;
	font-weight:800;
	color:var(--site-navy);
}

.pack-tiers__price--featured {
	color:var(--site-teal);
}


.layers-pricing__packs {
	max-width:640px;
	margin:0 auto;
}

.layers-pricing__subscription {
	max-width:640px;
	margin:0 auto 32px;
}

.layers-pricing__features {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:28px;
}

.layers-pricing__feature-list {
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.layers-pricing__packs-desc {
	font-size:13px;
	color:var(--site-text-sec);
	margin:12px 0 20px;
	line-height:1.6;
}

.layers-pricing__price {
	margin:16px 0 8px;
}

.layers-pricing__desc {
	font-size:14px;
	color:var(--site-text-sec);
	margin-bottom:24px;
	line-height:1.6;
}

.layers-pricing__price-period {
	font-size:15px;
	color:var(--site-text-muted);
}

.layers-pricing__price-amount {
	font-size:42px;
	font-weight:800;
	color:var(--site-navy);
	letter-spacing:-.03em;
}

.pf--more {
	color:var(--site-teal);
	font-weight:600;
}

.layers-pricing__check {
	color:var(--site-success);
	font-size:13px;
	flex-shrink:0;
}

.pf__plus {
	color:var(--site-teal);
	font-weight:700;
	margin-right:8px;
}

.layers-pricing__packs-note {
	font-size:11px;
	font-weight:500;
	color:var(--site-text-muted);
	text-transform:none;
	letter-spacing:0;
}

/* Carried over from style.css rules that matched these elements by their old inline style text. */

.layer-map__terrain { max-width:none; }

.layer-map__road--north { max-width:none; }

.layer-map__road--south { max-width:none; }

.layer-map__road--west { max-width:none; }

.layer-map__road--east { max-width:none; }

.layer-map__area-label--neighborhood { max-width:none; }

.layer-map__area-label--flood { max-width:none; }

.layer-map__pin--selected { max-width:none; }

.layer-map__pin--listing { max-width:none; }

.layer-map__pin--parcel { max-width:none; }

.layer-map__popup { max-width:none; }

.layer-map__panel { max-width:none; }

@media (max-width: 640px) {
	.app-frame .layers-pricing__features { grid-template-columns:1fr;gap:4px; }
	.app-frame .layers-pricing__features > * { min-width:0; }
}

/* Moved here from another stylesheet: this is where these classes are used. */
.pack-library__pack {
	background:var(--site-white);
	border:1px solid var(--site-border);
	border-radius:8px;
	padding:11px 13px;
}

.pack-library__pack--installed {
	background:var(--site-teal-bg);
	border:1px solid var(--site-teal-border);
}
.layer-map__boundaries {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}
.layer-map__footer {
	background:var(--site-bg-subtle);
	border-top:1px solid var(--site-border);
	padding:8px 14px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.pack-library {
	padding:12px 14px;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.pack-library__pack-name {
	font-size:10px;
	font-weight:700;
	color:var(--site-navy);
}
.layer-map__popup-price {
	font-size:10px;
	font-weight:800;
	color:var(--site-navy);
}
.layer-map__popup-address {
	font-size:8px;
	color:var(--site-text-muted);
}
.layer-map__listing-count {
	font-size:9px;
	font-weight:700;
	color:var(--site-teal);
}
.pack-library__pack-version {
	font-size:9px;
	font-weight:700;
	color:var(--site-teal);
}
.layer-map__summary {
	font-size:9px;
	color:var(--site-text-muted);
}
.pack-library__pack-desc {
	font-size:9px;
	color:var(--site-text-sec);
}
.layers-pricing__intro {
	margin-bottom:48px;
}
.pt--layers-plan {
	color:var(--site-teal);
}
.layer-map__boundaries { max-width:none; }