/**
 * The "Embed this map" button and its panel.
 *
 * Loaded only on the two map pages. Everything is prefixed lme- and the modal is
 * appended to <body>, so it cannot inherit or disturb either map's layout.
 */

/* Fallback bar, used only when the page's own controls row is not found. */
.lme-embed-bar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 8px;
}

/* In the page's controls row. Both rows are flex, so auto margin parks the
   button at the right hand end, on the same line as the search and filters. */
.lme-embed-btn--inline {
	margin-left: auto;
	flex: 0 0 auto;
}

/* The earthquake filter row aligns its items to flex-end, since its controls sit
   under legends; the button has no legend, so nudge it off the baseline. */
.eqm-filters .lme-embed-btn--inline { margin-bottom: 2px; }

/* Keeping the button on the filters' own line.
 *
 * The webcam controls row is capped by the page container at about 1168px and
 * its existing contents already come to roughly that, so adding anything at all
 * makes the row wrap and the button drops to a line of its own. Widening the
 * viewport does not help: the container has a max-width, so the row is the same
 * width at 1280px and at 1920px.
 *
 * So on desktop the row is told not to wrap, and the search field is the one
 * thing allowed to give up the difference (it needs about 34px). The sunlight
 * selector and the count are pinned, because the selector wraps its own buttons
 * onto a second line if it is squeezed, which would make the row taller rather
 * than shorter. Below this width the original wrapping behaviour is left alone,
 * which is what should happen on a phone.
 */
@media (min-width: 1000px) {
	.wwm-controls-row { flex-wrap: nowrap; }
	.wwm-controls-row .wwm-search-wrap { flex: 0 1 280px; min-width: 160px; }
	.wwm-controls-row .wwm-solar,
	.wwm-controls-row .wwm-count { flex: 0 0 auto; }
}

/* Phone/tablet: the webcam map stacks its controls (search, then the sunlight
   selector, then the count). The button goes last, so it shares the count's
   line and the auto margin parks it at the right end (1.0.21). */
@media (max-width: 900px) {
	.wwm-controls-row .lme-embed-btn--inline { order: 5; }
}
@media (max-width: 480px) {
	.wwm-controls-row .lme-embed-btn--inline { padding: 7px 10px; gap: 5px; font-size: 12px; }
}

/* Solid rather than outlined: this is an offer, and next to a row of white pill
   filters an outlined button read as one more inactive filter. */
.lme-embed-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	gap: 6px;
	appearance: none;
	cursor: pointer;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--blue, #1e73be);
	border: 0;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(30, 115, 190, .35);
	transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.lme-embed-btn svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

.lme-embed-btn:hover {
	background: var(--navy, #162b51);
	box-shadow: 0 4px 14px rgba(22, 43, 81, .4);
	transform: translateY(-1px);
}

.lme-embed-btn:focus-visible {
	outline: 2px solid var(--navy, #162b51);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lme-embed-btn { transition: none; }
	.lme-embed-btn:hover { transform: none; }
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

body.lme-modal-open { overflow: hidden; }

.lme-modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the site header, which is sticky */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lme-modal[hidden] { display: none !important; }

.lme-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 17, 28, .6);
}

.lme-modal-box {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: #fff;
	color: #16232e;
	border-radius: 6px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
	padding: 18px 20px 20px;
	font-size: 14px;
	line-height: 1.45;
}

.lme-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.lme-modal-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	color: var(--navy, #162b51);
}

.lme-modal-x {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
	color: #7b8896;
	flex: 0 0 auto;
}

.lme-modal-x:hover { color: #16232e; }

.lme-modal-intro {
	margin: 4px 0 14px;
	color: #5c6b7a;
	font-size: 13px;
}

/* The options column also holds the code box now, so it is wider than a column
   of short selects would need. That also uses the space beside the tall preview
   instead of leaving it empty. */
.lme-modal-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 16px;
	align-items: start;
}

@media (max-width: 720px) {
	.lme-modal-body { grid-template-columns: 1fr; }
	.lme-modal-box { padding: 14px 14px 16px; }
}

.lme-modal-frame {
	border-radius: 6px;
	overflow: hidden;
	background: #f6f8fa;
	box-shadow: 0 4px 18px rgba(16, 32, 48, .14);
}

.lme-m-iframe {
	display: block;
	width: 100%;
	border: 0;
}

.lme-m-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: #5c6b7a;
}

.lme-m-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--blue, #1e73be);
	text-decoration: underline;
	cursor: pointer;
}

/* ── Options ─────────────────────────────────────────────────────────────── */

.lme-m-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.lme-m-field {
	flex: 1 1 0;
	min-width: 0;
	display: block;
}

.lme-m-field--wide { flex-basis: 100%; }

.lme-m-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--navy, #162b51);
	margin-bottom: 4px;
}

.lme-m-input {
	width: 100%;
	box-sizing: border-box; /* 100% width plus padding, so this is load bearing */
	padding: 7px 9px;
	font-size: 13px;
	line-height: 1.3;
	color: inherit;
	background: #fff;
	border: 1px solid #d9e1ea;
	border-radius: 6px;
}

/* Correction note under a field. Takes no space until it has something to say,
   so the two-column row does not jump when it appears. */
.lme-m-note {
	display: none;
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.35;
	font-weight: 600;
	color: #9a5b00;
}

.lme-m-note.is-on { display: block; }

.lme-m-input:focus {
	outline: 2px solid var(--blue, #1e73be);
	outline-offset: 1px;
	border-color: var(--blue, #1e73be);
}

/* ── Code ────────────────────────────────────────────────────────────────── */

.lme-modal-code {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e3e8ee;
}

.lme-m-codehead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}

.lme-m-copied {
	font-size: 12px;
	font-weight: 700;
	color: #1a7f4b;
}

.lme-m-snippet {
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	padding: 11px;
	border: 1px solid #22303f;
	border-radius: 6px;
	background: #0f1722;
	color: #e7eef7;
	resize: vertical;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.lme-m-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.lme-m-btn {
	appearance: none;
	border: 0;
	border-radius: 6px;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--blue, #1e73be);
	cursor: pointer;
}

.lme-m-btn:hover { background: var(--navy, #162b51); }

.lme-m-credit {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #5c6b7a;
}