/* LOP Map — full-bleed deep-zoom viewer + floating chrome.
   One control language: pills + round tonal icon buttons on a light surface. */

:root {
	--lop-surface: #ffffff;
	--lop-surface-2: #f4f6f8;
	--lop-ink: #16241d;
	--lop-muted: #5c6a63;
	--lop-accent: #0f6b3f;
	--lop-border: rgba(20, 36, 29, 0.12);
	--lop-shadow: 0 6px 24px rgba(16, 36, 27, 0.16);
	--lop-radius: 14px;
	--lop-header-h: 68px;
}

/* Immersive page: lock scroll, hide the site footer. */
body.be-lop-page { overflow: hidden; }
body.be-lop-page .site-footer,
body.be-lop-page footer.be-footer,
body.be-lop-page .be-site-footer { display: none !important; }

.be-lop-main { position: relative; }

/* The viewer fills everything under the site header. Uses an explicit height
   (not position:fixed — the parent Newsmatic theme forces position:relative on
   in-flow elements, which collapsed a fixed+bottom:0 box to zero height and drew
   nothing). --lop-header-h is set to the real header height by lop-map.js. */
.be-lop-viewer {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--lop-header-h));
	min-height: 320px;
	background: #e9edf0;
	touch-action: none;
	overflow: hidden;
}
.be-lop-viewer .openseadragon-canvas { outline: none; }

/* Floating chrome sits over the viewer, click-through except on the controls. */
.be-lop-chrome {
	position: fixed;
	top: var(--lop-header-h);
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 20;
}
.be-lop-chrome > * { pointer-events: auto; }

/* ── Search pill ─────────────────────────────────────────────────────── */
.be-lop-search {
	position: absolute;
	top: 16px;
	left: 16px;
	width: min(360px, calc(100vw - 32px));
}
.be-lop-searchpill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--lop-surface);
	border: 1px solid var(--lop-border);
	border-radius: 999px;
	box-shadow: var(--lop-shadow);
	padding: 10px 14px;
}
.be-lop-ic { width: 20px; height: 20px; fill: var(--lop-muted); flex: none; }
.be-lop-searchinput {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 15px;
	color: var(--lop-ink);
	outline: none;
	min-width: 0;
}
.be-lop-searchclear {
	border: none;
	background: var(--lop-surface-2);
	color: var(--lop-muted);
	width: 24px;
	height: 24px;
	border-radius: 999px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex: none;
}
.be-lop-results {
	list-style: none;
	margin: 8px 0 0;
	padding: 6px;
	background: var(--lop-surface);
	border: 1px solid var(--lop-border);
	border-radius: var(--lop-radius);
	box-shadow: var(--lop-shadow);
	max-height: 50vh;
	overflow-y: auto;
}
.be-lop-results li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--lop-ink);
}
.be-lop-results li:hover,
.be-lop-results li.is-active { background: var(--lop-surface-2); }
.be-lop-results .be-lop-rtype { font-size: 12px; color: var(--lop-muted); margin-left: auto; text-transform: capitalize; }

/* ── Zoom read-out ───────────────────────────────────────────────────── */
.be-lop-zoom {
	position: absolute;
	top: 74px;
	left: 16px;
	background: var(--lop-surface);
	border: 1px solid var(--lop-border);
	border-radius: 999px;
	box-shadow: var(--lop-shadow);
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lop-ink);
	font-variant-numeric: tabular-nums;
}

/* ── Right action rail ───────────────────────────────────────────────── */
.be-lop-rail {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.be-lop-iconbtn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--lop-border);
	background: var(--lop-surface);
	box-shadow: var(--lop-shadow);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--lop-ink);
	transition: background .15s ease, transform .15s ease;
	text-decoration: none;
}
.be-lop-iconbtn:hover { background: var(--lop-surface-2); transform: translateY(-1px); }
.be-lop-iconbtn svg { width: 22px; height: 22px; fill: currentColor; }

/* ── Pinch hint ──────────────────────────────────────────────────────── */
.be-lop-hint {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(16, 36, 27, 0.86);
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	box-shadow: var(--lop-shadow);
	animation: be-lop-fade .4s ease;
}
@keyframes be-lop-fade { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── Legend / bottom sheet ───────────────────────────────────────────── */
.be-lop-sheet-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(16, 36, 27, 0.45);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
/* display:flex overrides the plain [hidden] attribute, so the sheet won't close
   without this — the recurring "[hidden] doesn't hide a flex box" gotcha. */
.be-lop-sheet-backdrop[hidden] { display: none; }
.be-lop-sheet {
	background: var(--lop-surface);
	border-radius: 18px;
	box-shadow: var(--lop-shadow);
	max-width: 440px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
}
.be-lop-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 6px;
}
.be-lop-sheet-head h2 { margin: 0; font-size: 1.15rem; color: var(--lop-ink); }
.be-lop-sheet-x { border: none; background: none; font-size: 26px; line-height: 1; color: var(--lop-muted); cursor: pointer; }
.be-lop-sheet-body { padding: 6px 20px 12px; color: var(--lop-ink); }
.be-lop-legend-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.be-lop-legend-row p { margin: 0; font-size: 14px; line-height: 1.55; }
.be-lop-swatch {
	flex: none;
	width: 46px;
	height: 34px;
	background: #fff;
	border: 2.5px solid #2b6fd6;
	border-radius: 4px;
	margin-top: 2px;
}
.be-lop-legend-note { font-size: 13px; color: var(--lop-muted); font-style: italic; margin: 0 0 12px; }
.be-lop-legend-disclaimer { font-size: 12.5px; color: var(--lop-muted); line-height: 1.55; margin: 0; }
.be-lop-sheet-foot { padding: 8px 20px 20px; }
.be-lop-sheet-foot .be-btn { width: 100%; }

/* ── Crop mode ───────────────────────────────────────────────────────── */
.be-lop-crop {
	position: fixed;
	top: var(--lop-header-h);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
}
.be-lop-crop-dim { position: absolute; background: rgba(16, 36, 27, 0.55); }
.be-lop-crop-box {
	position: absolute;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
	cursor: move;
}
.be-lop-crop-box::before,
.be-lop-crop-box::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.be-lop-crop-box::before { border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5); left: 33.33%; right: 33.33%; }
.be-lop-crop-box::after { border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); top: 33.33%; bottom: 33.33%; }
.be-lop-crop-handle {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.be-lop-crop-handle.tl { top: -8px; left: -8px; cursor: nwse-resize; }
.be-lop-crop-handle.tr { top: -8px; right: -8px; cursor: nesw-resize; }
.be-lop-crop-handle.bl { bottom: -8px; left: -8px; cursor: nesw-resize; }
.be-lop-crop-handle.br { bottom: -8px; right: -8px; cursor: nwse-resize; }
.be-lop-crop-bar {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
}
.be-lop-crop-bar .be-btn { box-shadow: var(--lop-shadow); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--lop-surface: #1a2420;
		--lop-surface-2: #243430;
		--lop-ink: #e7efe9;
		--lop-muted: #9fb0a7;
		--lop-border: rgba(255, 255, 255, 0.12);
		--lop-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	}
	.be-lop-viewer { background: #10201a; }
	.be-lop-swatch { background: #fff; }
}

@media (max-width: 600px) {
	:root { --lop-header-h: 58px; }
	.be-lop-rail { gap: 10px; }
	.be-lop-iconbtn { width: 42px; height: 42px; }
}