/*!
 * ESPMaps core styles: map app (toolbar, panel, card at the bottom on phones, fullscreen), minimap incl. the
 * server-rendered no-JS state, markers and Leaflet control restyling.
 *
 * Shared by the forum route /maps/<map> (static file) and the almanac (ResourceLoader). Colours
 * come only from XenForo style properties. XenForo 2.3 stores them as HSLA components
 * (`--xf-contentBg: 40, 100%, 98%, 1`), so they are used as `hsla(var(--xf-…))`; the wiki gets
 * the same variables from the forum frame CSS. Fallbacks are the light ESP style; dark mode
 * follows the style variation automatically because the variables change on :root.
 */

.espmaps-app,
.espmaps-mini {
	--espmaps-bg: hsla( var( --xf-contentBg, 40, 100%, 98%, 1 ) );
	--espmaps-bg-alt: hsla( var( --xf-contentAltBg, 39, 56%, 92%, 1 ) );
	--espmaps-highlight: hsla( var( --xf-contentHighlightBg, 9, 47%, 91%, 1 ) );
	--espmaps-text: hsla( var( --xf-textColor, 21, 25%, 14%, 1 ) );
	--espmaps-text-dimmed: hsla( var( --xf-textColorDimmed, 23, 18%, 25%, 1 ) );
	--espmaps-text-muted: hsla( var( --xf-textColorMuted, 24, 16%, 35%, 1 ) );
	--espmaps-border: hsla( var( --xf-borderColor, 37, 37%, 76%, 1 ) );
	--espmaps-border-feature: hsla( var( --xf-borderColorFeature, 350, 65%, 29%, 1 ) );
	--espmaps-link: hsla( var( --xf-linkColor, 350, 65%, 29%, 1 ) );
	--espmaps-link-hover: hsla( var( --xf-linkHoverColor, 350, 70%, 18%, 1 ) );
	--espmaps-button-bg: hsla( var( --xf-buttonBg, 39, 56%, 92%, 1 ) );
	--espmaps-button-text: hsla( var( --xf-buttonTextColor, 350, 65%, 29%, 1 ) );
	--espmaps-primary-bg: hsla( var( --xf-buttonPrimaryBg, 350, 65%, 29%, 1 ) );
	--espmaps-primary-text: hsla( var( --xf-espButtonPrimaryText, 38, 100%, 97%, 1 ) );
	--espmaps-input-bg: hsla( var( --xf-inputBgColor, 45, 100%, 99%, 1 ) );
	--espmaps-input-border: hsla( var( --xf-espInputBorderColor, 29, 16%, 47%, 1 ) );
	--espmaps-input-focus: hsla( var( --xf-borderColorHighlight, 350, 65%, 29%, 1 ) );
	--espmaps-chrome-bg: hsla( var( --xf-chromeBg, 349, 68%, 17%, 1 ) );
	--espmaps-chrome-text: hsla( var( --xf-chromeTextColor, 35, 62%, 88%, 1 ) );
	--espmaps-overlay-top: hsla( var( --xf-espHeaderOverlayTop, 349, 68%, 17%, 0.9 ) );
	--espmaps-overlay-bottom: hsla( var( --xf-espHeaderOverlayBottom, 350, 70%, 12%, 0.96 ) );
	--espmaps-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
	/* The popup shadow of the forum (docs/design.md): place preview, popups, search suggestions. */
	--espmaps-shadow-lg: 0 10px 28px rgba( 0, 0, 0, 0.22 );
	/* Game colours of dots and chips: fixed, they sit on map imagery, not on page colours. */
	--espmaps-game-mw: #c8742c;
	--espmaps-game-ob: #3e7fc4;
	--espmaps-game-sr: #e8e2d6;
	--espmaps-game-si: #b0457a;
	--espmaps-game-none: #8c7865;
	--espmaps-game-eso: #b8892f;
	/* Marker symbols on the map image (MARKER_SIZE in espmaps.js, tools/maps/icons). */
	--espmaps-marker-size: 26px;
	/* Sizes: XenForo outputs only colours as CSS variables, so these repeat the values of the style
	   properties (src/styles/esp/style_properties.less, docs/design.md section 3). Every font size and
	   radius of the map uses one of them; only symbols and labels on the map image keep their own. */
	--espmaps-font-smallest: 12px; /* fontSizeSmallest */
	--espmaps-font-smaller: 13px; /* fontSizeSmaller */
	--espmaps-font-small: 14px; /* fontSizeSmall */
	--espmaps-font-normal: 16px; /* fontSizeNormal */
	--espmaps-font-large: 18px; /* fontSizeLarge */
	--espmaps-font-larger: 22px; /* fontSizeLarger */
	--espmaps-font-largest: 26px; /* fontSizeLargest */
	--espmaps-radius-small: 4px; /* borderRadiusSmall: pictures, entries in lists and menus */
	--espmaps-radius-medium: 8px; /* borderRadiusMedium: buttons, fields */
	--espmaps-radius-large: 10px; /* borderRadiusLarge: blocks, menus, popups */
	--espmaps-radius-pill: 999px; /* fully round chips (no property) */
	color: var( --espmaps-text );
}

.espmaps-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.espmaps-muted {
	color: var( --espmaps-text-muted );
}

.espmaps-icon {
	display: inline-flex;
	flex: none;
}

.espmaps-icon svg {
	display: block;
	/* The forum CSS fills SVGs; these icons are outlines. */
	fill: none;
	stroke: currentColor;
}

/* ------------------------------------------------------------------- app frame */

.espmaps-app {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	/* The rest of the viewport below the app (--espmaps-top is measured by the script). */
	height: calc( 100vh - var( --espmaps-top, 0px ) );
	height: calc( 100dvh - var( --espmaps-top, 0px ) );
	min-height: 420px;
	background: var( --espmaps-bg );
	font-size: var( --espmaps-font-small );
	line-height: 1.45;
}

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

.espmaps-app.is-loading,
.espmaps-app.is-error {
	display: grid;
	place-items: center;
	padding: 24px 16px;
	text-align: center;
}

.espmaps-app-message {
	margin: 0;
	color: var( --espmaps-text-muted );
}

.espmaps-app :focus-visible {
	outline: 2px solid var( --espmaps-link );
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- toolbar */

.espmaps-toolbar {
	position: relative;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var( --espmaps-bg-alt );
	border-bottom: 1px solid var( --espmaps-border );
}

.espmaps-toolbar-spacer {
	flex: 1 1 0;
	min-width: 0;
}

.espmaps-logo,
.espmaps-sitemenu {
	display: none;
}

/* Embedded in a dialog of another page (the picker of the forum editor, #225): the dialog gives
   the height; fullscreen and "Link kopieren" belong to the map page. */
.espmaps-app.is-embedded {
	height: 100%;
	min-height: 0;
}

.espmaps-app.is-embedded .espmaps-button--fullscreen,
.espmaps-app.is-embedded .espmaps-button--copy {
	display: none;
}

.espmaps-logo img {
	display: block;
	height: 22px;
	width: auto;
	max-width: none;
}

/* only the emblem when the full logo does not fit in the bar (MapApp.fitLogo) */
.espmaps-logo .espmaps-logo-mark,
.espmaps-logo.is-compact .espmaps-logo-full {
	display: none;
}

.espmaps-logo.is-compact .espmaps-logo-mark {
	display: block;
	height: 26px;
}

/* Map switch: segmented links, the current map pressed. */
.espmaps-seg {
	display: inline-flex;
	max-width: 100%;
	overflow-x: auto;
	padding: 2px;
	background: var( --espmaps-bg );
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-large );
	scrollbar-width: none;
}

.espmaps-seg-item {
	padding: 6px 11px;
	border-radius: var( --espmaps-radius-medium );
	font-weight: 600;
	font-size: var( --espmaps-font-small );
	line-height: 1.2;
	white-space: nowrap;
	color: var( --espmaps-text-dimmed );
	text-decoration: none;
}

.espmaps-seg-item:hover {
	/* like the tabs of the forum and the almanac: tinted field, no underline */
	background: color-mix( in srgb, var( --espmaps-link ) 10%, transparent );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-seg-item.is-active {
	background: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
	text-decoration: none;
}

/* the map switch keeps its width; the search field gives way */
.espmaps-switcher {
	flex: none;
}

/* Short labels ("Tamriel | ESO") on narrow screens; the full name stays in title and aria-label */
.espmaps-switcher-short {
	display: none;
}

/* Game worlds menu: game, below it place and year */
/* as tall as the window below the toolbar allows (--espmaps-menu-top, set when it opens): the
   whole list without a scroll bar wherever it fits */
.espmaps-menu.espmaps-worlds-menu {
	min-width: 240px;
	max-height: calc( 100vh - var( --espmaps-menu-top, 120px ) - 16px );
}

/* wide screens: the eras side by side, so the list stays short enough for the forum page too */
@media ( min-width: 761px ) {
	.espmaps-menu.espmaps-worlds-menu {
		width: auto;
	}

	.espmaps-worlds-menu .espmaps-menu-body {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax( 180px, auto );
		gap: 0 16px;
	}
}

.espmaps-menu-list.espmaps-worlds-list a {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.espmaps-world-game {
	font-weight: 600;
}

.espmaps-world-place {
	font-size: var( --espmaps-font-smaller );
	color: var( --espmaps-text-muted );
}

.espmaps-worlds-list a:hover .espmaps-world-place {
	color: inherit;
}

/* Map switch as a menu (switcherMenus, levels of the Battlespire): number, then name */
.espmaps-menu.espmaps-switcher-menu {
	min-width: 240px;
	max-height: calc( 100vh - var( --espmaps-menu-top, 120px ) - 16px );
}

.espmaps-menu-list.espmaps-switcher-list a {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.espmaps-switcher-number {
	min-width: 1em;
	color: var( --espmaps-text-muted );
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.espmaps-switcher-list a.is-active .espmaps-switcher-number,
.espmaps-switcher-list a:hover .espmaps-switcher-number {
	color: inherit;
}

/* The variants of an area layer group in the filter menu ("Bloodmoon | Dragonborn"). */
.espmaps-layerswitch-item {
	padding: 4px 8px;
	border: 0;
	border-radius: var( --espmaps-radius-small );
	background: transparent;
	color: var( --espmaps-text-dimmed );
	font: inherit;
	cursor: pointer;
}

.espmaps-layerswitch-item:hover {
	/* like the tabs of the forum and the almanac: tinted field, no underline */
	background: color-mix( in srgb, var( --espmaps-link ) 10%, transparent );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-layerswitch-item.is-active {
	background: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
	text-decoration: none;
}

.espmaps-filter-variants {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	font-size: var( --espmaps-font-smaller );
	font-weight: 600;
}

.espmaps-layerswitch-item:focus-visible {
	outline: 2px solid var( --espmaps-link );
	outline-offset: 1px;
}

.espmaps-toolbar-break {
	display: none;
}

/* Buttons like the forum's .button (docs/design.md, section 5): 40 px, small 32 px. */
.espmaps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 5px 12px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	background: var( --espmaps-button-bg );
	color: var( --espmaps-button-text );
	font: inherit;
	font-size: var( --espmaps-font-small );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* hover and keyboard focus like the tabs and buttons of the forum: tinted field in the link colour */
.espmaps-button:hover,
.espmaps-button:focus-visible {
	background: color-mix( in srgb, var( --espmaps-link ) 10%, var( --espmaps-button-bg ) );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-button[disabled] {
	opacity: 0.55;
	cursor: default;
}

.espmaps-button--primary,
a.espmaps-button--primary {
	background: var( --espmaps-primary-bg );
	border-color: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
	font-weight: 700;
}

.espmaps-button--primary:hover,
.espmaps-button--primary:focus-visible {
	background: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
	filter: brightness( 1.12 );
}

.espmaps-button.is-done {
	border-color: var( --espmaps-border-feature );
}

.espmaps-linkbutton {
	padding: 2px 4px;
	border: 0;
	background: none;
	color: var( --espmaps-link );
	font: inherit;
	font-size: var( --espmaps-font-smaller );
	font-weight: 600;
	cursor: pointer;
}

.espmaps-linkbutton:hover {
	color: var( --espmaps-link-hover );
	text-decoration: underline;
}

/* Search field with result list. */
.espmaps-search {
	position: relative;
	flex: 0 1 260px;
	min-width: 180px;
}

.espmaps-search > .espmaps-icon {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY( -50% );
	color: var( --espmaps-text-muted );
	pointer-events: none;
}

.espmaps-search-input {
	width: 100%;
	height: 40px;
	padding: 0 10px 0 34px;
	border: 1px solid var( --espmaps-input-border );
	border-radius: var( --espmaps-radius-medium );
	background: var( --espmaps-input-bg );
	color: var( --espmaps-text );
	font: inherit;
	/* fontSizeNormal; the height stays that of the toolbar buttons */
	font-size: var( --espmaps-font-normal );
	-webkit-appearance: none;
	appearance: none;
}

/* Focused like the forum's .input: a 2 px border in borderColorHighlight instead of the outline. */
.espmaps-app .espmaps-search-input:focus {
	border-color: var( --espmaps-input-focus );
	box-shadow: 0 0 0 1px var( --espmaps-input-focus );
	outline: none;
}

.espmaps-search-input::placeholder {
	color: var( --espmaps-text-muted );
	opacity: 1;
}

.espmaps-search-results {
	position: absolute;
	left: 0;
	top: calc( 100% + 4px );
	z-index: 30;
	width: max( 100%, 320px );
	max-width: calc( 100vw - 24px );
	max-height: min( 420px, 60vh );
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var( --espmaps-bg );
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-large );
	box-shadow: var( --espmaps-shadow-lg );
}

.espmaps-search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var( --espmaps-radius-small );
	cursor: pointer;
}

.espmaps-search-item:hover,
.espmaps-search-item.is-active {
	background: var( --espmaps-bg-alt );
}

.espmaps-search-item.is-active {
	box-shadow: inset 3px 0 0 var( --espmaps-border-feature );
}

.espmaps-search-icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: none;
}

.espmaps-search-icon img {
	width: 16px;
	height: 16px;
}

.espmaps-search-text {
	display: grid;
	min-width: 0;
}

.espmaps-search-title {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espmaps-search-region {
	font-size: var( --espmaps-font-smaller );
	color: var( --espmaps-text-muted );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espmaps-search-empty {
	padding: 8px 10px;
	color: var( --espmaps-text-muted );
}

/* Dropdown menus (worlds, filter, ☰) in the look of XenForo's menus (search, account): accent
   edge on top, an arrow at the button, title row, shadow; the content scrolls below the title.
   --espmaps-menu-arrow: the button's centre from the menu's edge (Dropdown.open). */
.espmaps-dropdown {
	position: relative;
}

.espmaps-menu {
	position: absolute;
	top: calc( 100% + 10px );
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: calc( 100vw - 24px );
	max-height: min( 70vh, 520px );
	background: var( --espmaps-bg );
	color: var( --espmaps-text );
	border-top: 3px solid var( --espmaps-primary-bg );
	border-radius: var( --espmaps-radius-large );
	box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.35 );
	font-size: var( --espmaps-font-small );
}

.espmaps-menu.is-right {
	left: auto;
	right: 0;
}

.espmaps-menu[ hidden ] {
	display: none;
}

.espmaps-menu-arrow {
	position: absolute;
	top: -11px;
	left: calc( var( --espmaps-menu-arrow, 20px ) - 8px );
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top: 0;
	border-bottom-color: var( --espmaps-primary-bg );
}

.espmaps-menu.is-right .espmaps-menu-arrow {
	left: auto;
	right: calc( var( --espmaps-menu-arrow, 20px ) - 8px );
}

.espmaps-menu-title {
	flex: none;
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid var( --espmaps-border );
	background: var( --espmaps-bg-alt );
	border-radius: calc( var( --espmaps-radius-large ) - 3px ) calc( var( --espmaps-radius-large ) - 3px ) 0 0;
	font-size: var( --espmaps-font-large );
	font-weight: 700;
}

.espmaps-menu-body {
	min-height: 0;
	overflow-y: auto;
	padding: 6px 12px 12px;
}

.espmaps-site-menu {
	width: 240px;
}

.espmaps-menu-heading {
	margin: 6px 0 6px;
	font-size: var( --espmaps-font-smallest );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --espmaps-text-muted );
}

.espmaps-menu-headrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.espmaps-menu-quick {
	display: inline-flex;
	gap: 4px;
}

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

.espmaps-menu-list a {
	display: block;
	padding: 6px 8px;
	border-radius: var( --espmaps-radius-small );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-menu-list a:hover {
	background: color-mix( in srgb, var( --espmaps-link ) 10%, transparent );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-menu-list a.is-active {
	font-weight: 700;
}

.espmaps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* the filter chip of docs/design.md (section 6) with the sizes of espDirectory-chip
   (fontSizeSmall); a legend, so all are on at first and "off" is struck through */
.espmaps-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-pill );
	background: var( --espmaps-bg );
	color: var( --espmaps-text-dimmed );
	font: inherit;
	font-size: var( --espmaps-font-small );
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.espmaps-chip[ aria-pressed='false' ] {
	background: transparent;
	color: var( --espmaps-text-muted );
	text-decoration: line-through;
}

.espmaps-chip[ aria-pressed='false' ] .espmaps-dot {
	opacity: 0.45;
}

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

.espmaps-checklist label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	cursor: pointer;
}

.espmaps-checklist input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --espmaps-primary-bg );
}

/* up to three icons of the group; fixed width, so the names stay in one column */
.espmaps-checklist-icons {
	flex: none;
	display: inline-flex;
	gap: 3px;
	width: 60px;
}

.espmaps-checklist-icon {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
}

.espmaps-checklist-icon .espmaps-marker-img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.espmaps-checklist-label {
	flex: 1 1 auto;
}

/* roads and rivers in two columns, each with its line in front (renderFilter) */
.espmaps-checklist--paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
}

.espmaps-path-sample {
	flex: none;
	display: inline-flex;
	width: 24px;
}

.espmaps-checklist-count {
	font-size: var( --espmaps-font-smallest );
	color: var( --espmaps-text-muted );
	font-variant-numeric: tabular-nums;
}

.espmaps-button--filter {
	position: relative;
}

.espmaps-filter-badge {
	display: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --espmaps-border-feature );
}

.espmaps-button--filter.is-filtered .espmaps-filter-badge {
	display: inline-block;
}

/* ------------------------------------------------------------------ map + panel */

.espmaps-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.espmaps-map {
	position: relative;
	/* Own stacking context: Leaflet's pane/control z-indexes (up to 1000) stay inside. */
	z-index: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.espmaps-panel {
	position: absolute;
	z-index: 10;
	top: 12px;
	right: 12px;
	width: 320px;
	/* Ends above the zoom control in the bottom right corner. */
	max-height: calc( 100% - 110px );
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 16px 16px;
	background: var( --espmaps-bg );
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-large );
	box-shadow: var( --espmaps-shadow-lg );
	font-size: var( --espmaps-font-small );
}

.espmaps-panel.is-empty {
	display: none;
}

/* Desktop: the panel sits in a Leaflet popup next to the selected marker (MapApp.openPopup). */
.espmaps-panel.is-popup {
	position: relative;
	top: auto;
	right: auto;
	width: auto;
	max-height: min( 500px, 70vh );
	background: transparent;
	border: 0;
	border-radius: var( --espmaps-radius-large );
	box-shadow: none;
}

/* compact next to the marker: a small picture, so title, text and buttons fit without scrolling */
.espmaps-panel.is-popup .espmaps-panel-thumb {
	max-height: 120px;
}

.espmaps-popup .leaflet-popup-content-wrapper {
	padding: 0;
	background: var( --espmaps-bg );
	color: var( --espmaps-text );
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-large );
	box-shadow: var( --espmaps-shadow-lg );
}

.espmaps-popup .leaflet-popup-content {
	width: 320px !important;
	margin: 0;
	font: inherit;
	line-height: 1.45;
}

.espmaps-popup .leaflet-popup-tip {
	background: var( --espmaps-bg );
	border: 1px solid var( --espmaps-border );
	box-shadow: none;
}

/* Leaflet colours links inside the map; the buttons of the preview keep their own colours. */
.espmaps-popup a.espmaps-button {
	color: var( --espmaps-button-text, inherit );
}

.espmaps-popup a.espmaps-button:hover {
	color: var( --espmaps-link );
}

.espmaps-popup a.espmaps-button--primary {
	color: var( --espmaps-primary-text );
}

/* "Position übernehmen" (context menu of the map, MapApp.openPositionMenu) */
.espmaps-posmenu-popup .leaflet-popup-content {
	width: auto !important;
	min-width: 300px;
}

.espmaps-posmenu {
	display: grid;
	gap: 8px;
	padding: 12px 14px 14px;
	font-size: var( --espmaps-font-smaller );
}

.espmaps-posmenu p {
	margin: 0;
}

.espmaps-posmenu-title {
	font-size: var( --espmaps-font-normal );
	font-weight: 700;
	color: var( --espmaps-text );
}

.espmaps-posmenu-coords,
.espmaps-posmenu-label,
.espmaps-posmenu-hint {
	color: var( --espmaps-text-muted );
}

.espmaps-posmenu-item {
	display: grid;
	gap: 3px;
}

/* "Neuer Ort hier" for the map editors (MapApp.newPlaceItem) */
.espmaps-posmenu-new {
	display: grid;
	justify-items: start;
	gap: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var( --espmaps-border );
}

.espmaps-posmenu-new p {
	margin: 0;
	font-size: var( --espmaps-font-smaller );
}

.espmaps-posmenu-row {
	display: flex;
	gap: 6px;
	align-items: flex-start;
}

.espmaps-posmenu-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 7px;
	border: 1px solid var( --espmaps-input-border );
	border-radius: var( --espmaps-radius-medium );
	background: var( --espmaps-input-bg );
	color: var( --espmaps-text );
	font: var( --espmaps-font-smallest )/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow: hidden;
	resize: none;
}

.espmaps-posmenu-copy {
	flex: none;
	padding-left: 8px;
	padding-right: 8px;
}

/* Column layout (no longer used by the shells, kept for embedding): panel right of the map. */
@media ( min-width: 761px ) {
	.espmaps-app--column:not( .is-fullscreen ) .espmaps-panel {
		position: static;
		flex: 0 0 320px;
		width: 320px;
		max-height: none;
		border: 0;
		border-left: 1px solid var( --espmaps-border );
		border-radius: 0;
		box-shadow: none;
	}

	.espmaps-app--column:not( .is-fullscreen ) .espmaps-panel.is-empty {
		display: block;
	}

	.espmaps-app--column:not( .is-fullscreen ) .espmaps-panel-close {
		display: none;
	}
}

.espmaps-panel-handle,
.espmaps-panel-media,
.espmaps-panel-more {
	display: none;
}

.espmaps-panel-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --espmaps-text-muted );
	cursor: pointer;
}

.espmaps-panel-close:hover {
	background: var( --espmaps-bg-alt );
	color: var( --espmaps-text );
}

.espmaps-panel.is-empty .espmaps-panel-close {
	display: none;
}

/* "Bearbeiten" of a place of the JSON pages, left of the close button (map editors only) */
.espmaps-panel-edit {
	position: absolute;
	top: 8px;
	right: 42px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var( --espmaps-text-muted );
}

.espmaps-popup a.espmaps-panel-edit {
	color: var( --espmaps-text-muted );
}

.espmaps-panel-edit:hover,
.espmaps-popup a.espmaps-panel-edit:hover {
	background: var( --espmaps-bg-alt );
	color: var( --espmaps-text );
}

.espmaps-panel-title.has-edit {
	padding-right: 66px;
}

.espmaps-panel-body {
	display: grid;
	gap: 10px;
}

.espmaps-panel-body p {
	margin: 0;
}

.espmaps-panel-title {
	margin: 0;
	padding-right: 32px;
	font-size: var( --espmaps-font-large );
	font-weight: 700;
	line-height: 1.2;
	color: var( --espmaps-text );
}

.espmaps-panel-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: var( --espmaps-font-smaller );
	color: var( --espmaps-text-muted );
}

.espmaps-panel-meta .espmaps-dot {
	flex: none;
	transform: translateY( 1px );
}

.espmaps-panel-preview {
	display: grid;
	gap: 10px;
}

.espmaps-panel-thumb {
	display: block;
	width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: cover;
	border-radius: var( --espmaps-radius-medium );
	border: 1px solid var( --espmaps-border );
	background: var( --espmaps-bg-alt );
}

.espmaps-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* a long label ("Karte Shadowkey: West-Drachenstern öffnen") wraps instead of running out of the
   320 px preview (docs/design.md, section 5) */
.espmaps-panel-actions .espmaps-button {
	max-width: 100%;
	white-space: normal;
	text-align: start;
}

/* the game articles of a place whose preview is its lore article: small links below the buttons */
.espmaps-panel-games {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var( --espmaps-border );
	font-size: var( --espmaps-font-smaller );
	color: var( --espmaps-text-muted );
}

.espmaps-panel-games ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.espmaps-panel-games li {
	margin: 0;
}

/* the game articles are map buttons, a size smaller than those of the preview */
.espmaps-button--small {
	min-height: 32px;
	padding: 3px 10px;
	font-size: var( --espmaps-font-smaller );
}

/* ---------------------------------------------------------------- card at the bottom (phones) */

@media ( max-width: 650px ) {
	/* A floating card at the bottom of the map, like the popups elsewhere (docs/design.md):
	   compact with title, small picture and buttons; "Mehr" (is-expanded) shows the rest. */
	.espmaps-panel,
	.espmaps-app--column .espmaps-panel {
		position: absolute;
		top: auto;
		left: 8px;
		right: 8px;
		bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
		width: auto;
		max-height: calc( 100% - 16px );
		padding: 0 12px 12px;
		border: 1px solid var( --espmaps-border );
		border-radius: var( --espmaps-radius-large );
		box-shadow: var( --espmaps-shadow-lg );
		transition: transform 0.18s ease-out;
	}

	.espmaps-panel.is-expanded {
		max-height: 70%;
	}

	.espmaps-panel-more {
		display: inline-flex;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-body {
		grid-template-columns: 56px minmax( 0, 1fr );
		column-gap: 12px;
		row-gap: 4px;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-media {
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		border: 1px solid var( --espmaps-border );
		border-radius: var( --espmaps-radius-small );
		background: var( --espmaps-bg-alt );
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-body > *,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-preview > * {
		grid-column: 1 / -1;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-preview {
		display: contents;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-title,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-meta {
		grid-column: 2;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-title {
		grid-row: 1;
		align-self: end;
		font-size: var( --espmaps-font-normal );
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-meta {
		grid-row: 2;
		align-self: start;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-media,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-thumb {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 56px;
		height: 56px;
		max-height: none;
		border-radius: var( --espmaps-radius-small );
		animation: espmaps-fade-in 0.15s ease-out;
	}

	@keyframes espmaps-fade-in {
		from {
			opacity: 0;
		}
	}

	@media ( prefers-reduced-motion: reduce ) {
		.espmaps-panel-thumb {
			animation: none !important;
		}
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-alt,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-note,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-list,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-extract,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-games,
	.espmaps-panel:not( .is-expanded ) .espmaps-panel-preview > .espmaps-muted {
		display: none;
	}

	.espmaps-panel:not( .is-expanded ) .espmaps-panel-actions {
		margin-top: 6px;
	}

	.espmaps-panel.is-dragging {
		transition: none;
	}

	.espmaps-panel-handle {
		position: sticky;
		top: 0;
		z-index: 1;
		display: block;
		height: 18px;
		margin: 0 -12px 2px;
		background: var( --espmaps-bg );
		touch-action: none;
		cursor: grab;
	}

	.espmaps-panel-handle::before {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		margin: 7px auto 0;
		border-radius: var( --espmaps-radius-pill );
		background: var( --espmaps-text-muted );
		opacity: 0.6;
	}

	.espmaps-panel-close {
		top: 10px;
		z-index: 2;
	}

	/* The zoom control would sit under the sheet; pinch zoom works on phones. */
	.espmaps-app.has-selection .leaflet-bottom.leaflet-right {
		display: none;
	}
}

/* ------------------------------------------------------------------ fullscreen C */

/* XenForo forces the page scrollbar (body { overflow-y: scroll !important }); with classic
   scrollbars (Safari with a mouse, Windows) it would cover the right edge of the fixed map. */
html.espmaps-is-fullscreen,
html.espmaps-is-fullscreen body {
	overflow: hidden !important;
}

html.espmaps-is-fullscreen .p-staffBar,
html.espmaps-is-fullscreen .p-header,
html.espmaps-is-fullscreen .p-navSticky,
html.espmaps-is-fullscreen .p-sectionLinks,
html.espmaps-is-fullscreen .p-breadcrumbs,
html.espmaps-is-fullscreen .p-body-header,
html.espmaps-is-fullscreen .p-footer,
html.espmaps-is-fullscreen .esp-wiki-tabHeader {
	display: none !important;
}

.espmaps-app.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 400;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.espmaps-app.is-fullscreen .espmaps-toolbar {
	gap: 10px;
	padding: 6px max( 12px, env( safe-area-inset-right, 0px ) ) 6px max( 12px, env( safe-area-inset-left, 0px ) );
	padding-top: max( 6px, env( safe-area-inset-top, 0px ) );
	border-bottom: 0;
	background-color: var( --espmaps-chrome-bg );
	background-image: linear-gradient( 180deg, var( --espmaps-overlay-top ), var( --espmaps-overlay-bottom ) ), url( /styles/esp/header-map.webp );
	background-size: 100% 100%, 1600px auto;
	background-position: 0 0, center -180px;
	background-repeat: no-repeat, repeat-x;
	color: var( --espmaps-chrome-text );
}

.espmaps-app.is-fullscreen .espmaps-logo,
.espmaps-app.is-fullscreen .espmaps-sitemenu {
	display: block;
}

.espmaps-app.is-fullscreen .espmaps-logo {
	margin-right: 4px;
}

/* translucent like the buttons in the forum header (fade(@xf-chromeTextColor, …) in elderscrollsportal.less) */
.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-button,
.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-dropdown > .espmaps-button {
	background: color-mix( in srgb, var( --espmaps-chrome-text ) 10%, transparent );
	border-color: color-mix( in srgb, var( --espmaps-chrome-text ) 50%, transparent );
	color: var( --espmaps-chrome-text );
}

.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-button:hover,
.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-button:focus-visible,
.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-dropdown > .espmaps-button:hover,
.espmaps-app.is-fullscreen .espmaps-toolbar > .espmaps-dropdown > .espmaps-button:focus-visible {
	background: color-mix( in srgb, var( --espmaps-chrome-text ) 20%, transparent );
	border-color: var( --espmaps-chrome-text );
}

.espmaps-app.is-fullscreen .espmaps-toolbar :focus-visible {
	outline-color: var( --espmaps-chrome-text );
}

.espmaps-app.is-fullscreen .espmaps-filter-badge {
	background: var( --espmaps-chrome-text );
}

/* -------------------------------------------------------------- narrow screens */

/* The bar stays one line: "Link kopieren" and "Vollbild"/"Vollbild beenden" show only their icon
   (title and screen reader text keep the label). */
.espmaps-button--copy .espmaps-button-text,
.espmaps-button--fullscreen .espmaps-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.espmaps-button--copy,
.espmaps-button--fullscreen {
	padding-left: 8px;
	padding-right: 8px;
}

@media ( min-width: 901px ) {
	.espmaps-toolbar {
		flex-wrap: nowrap;
	}
}

/* Bar too long even with the small logo (a long level name such as "Hunting Lodge of Mehrunes
   Dagon"): the map switch shows its short label, as below 900 px (MapApp.fitLogo). */
.espmaps-toolbar.is-tight .espmaps-switcher-long {
	display: none;
}

.espmaps-toolbar.is-tight .espmaps-switcher-short {
	display: inline;
}

/* Fullscreen bar above the phone layout: one row; the search shrinks first, then the logo becomes
   the emblem (MapApp.fitLogo) */
@media ( min-width: 651px ) {
	.espmaps-app.is-fullscreen .espmaps-toolbar {
		flex-wrap: nowrap;
	}

	.espmaps-app.is-fullscreen .espmaps-logo {
		flex: none;
	}

	.espmaps-app.is-fullscreen .espmaps-search {
		min-width: 160px;
	}
}

@media ( max-width: 900px ) {
	.espmaps-switcher-long {
		display: none;
	}

	.espmaps-switcher-short {
		display: inline;
	}

	.espmaps-button--worlds .espmaps-button-text,
	.espmaps-button--copy .espmaps-button-text,
	.espmaps-button--fullscreen .espmaps-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.espmaps-button--worlds,
	.espmaps-button--copy,
	.espmaps-button--fullscreen {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media ( max-width: 650px ) {
	.espmaps-app {
		font-size: var( --espmaps-font-small );
	}

	.espmaps-toolbar {
		padding: 8px;
		gap: 6px;
	}

	.espmaps-search {
		flex: 1 1 140px;
		min-width: 0;
	}

	.espmaps-toolbar-spacer {
		display: none;
	}

	.espmaps-app.is-fullscreen .espmaps-search {
		order: 10;
		flex-basis: 100%;
	}

	/* fullscreen with a map switch: search and switch share the second row, so the logo keeps
	   its room in the first */
	.espmaps-app.is-fullscreen.has-switcher .espmaps-toolbar-break {
		display: block;
		order: 9;
		flex-basis: 100%;
		height: 0;
	}

	.espmaps-app.is-fullscreen.has-switcher .espmaps-search {
		flex: 1 1 0;
	}

	.espmaps-app.is-fullscreen .espmaps-switcher {
		order: 11;
	}

	/* Fullscreen on phones: logo, worlds, filter, menu and exit in one row, search and map switch below */
	.espmaps-app.is-fullscreen .espmaps-toolbar {
		gap: 6px;
	}

	/* the logo takes the rest of the first row; when it does not fit there, MapApp.fitLogo shows
	   the emblem instead of shrinking it */
	.espmaps-app.is-fullscreen .espmaps-logo {
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0;
		overflow: hidden;
	}

	.espmaps-app.is-fullscreen .espmaps-logo-full {
		height: 20px;
	}

	.espmaps-app.is-fullscreen .espmaps-toolbar .espmaps-button {
		min-width: 40px;
		padding-left: 7px;
		padding-right: 7px;
	}

	.espmaps-filter .espmaps-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.espmaps-button--filter {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* fixed below their button (left and width from Dropdown.open), over the map */
	.espmaps-menu,
	.espmaps-menu.is-right {
		position: fixed;
		top: var( --espmaps-menu-top, 64px );
		right: auto;
		max-height: calc( 100vh - var( --espmaps-menu-top, 64px ) - 12px );
		max-height: calc( 100dvh - var( --espmaps-menu-top, 64px ) - 12px );
	}

	.espmaps-search-results {
		width: 100%;
		max-width: none;
	}
}

/* ---------------------------------------------------------------- Leaflet look */

/* Water behind the tiles. Leaflet's own .leaflet-container { background: #ddd } may load after this
   file (ResourceLoader adds the module styles later); the light grey would show through the hairline
   gaps the browser leaves between tiles at fractional device pixels, so this selector is stronger. */
.leaflet-container.espmaps-leaflet {
	background-color: var( --espmaps-water, #33505f );
	background-image: var( --espmaps-water-tile, none );
	font: inherit;
}

/* Seams between tiles: every tile is its own composited layer, and wherever the map does not start
   on a whole device pixel (below a page title, during zoom animations, on Safari) the browser
   antialiases each tile edge, so a hairline of the background shows between neighbours. Each tile
   is drawn 1 px larger and overlaps its right and bottom neighbour (Leaflet issue #3575); the 0.4 %
   larger image is not visible. Normal blending instead of Leaflet's plus-lighter, which adds the
   overlapping edges up to a light line. */
.leaflet-container.espmaps-leaflet img.leaflet-tile {
	width: 257px !important;
	height: 257px !important;
	mix-blend-mode: normal;
}

/* Levels painted in large pixels ("pixelated", the province maps of Arena): beyond their deepest
   tiles the pixels stay sharp instead of blurring (decision of 26.10.2026). */
.espmaps-leaflet .espmaps-tiles--pixelated img.leaflet-tile {
	image-rendering: pixelated;
}

.espmaps-leaflet:focus-visible {
	outline: 3px solid var( --espmaps-link );
	outline-offset: -3px;
}

.espmaps-leaflet .leaflet-control-zoom {
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	overflow: hidden;
	box-shadow: var( --espmaps-shadow );
	background-clip: padding-box;
}

.espmaps-leaflet .leaflet-control-zoom a,
.espmaps-leaflet.leaflet-touch .leaflet-control-zoom a {
	width: 34px;
	height: 34px;
	line-height: 32px;
	font: 700 var( --espmaps-font-larger )/32px system-ui, sans-serif;
	background: var( --espmaps-bg );
	color: var( --espmaps-button-text );
	border-bottom: 1px solid var( --espmaps-border );
	border-radius: 0;
}

.espmaps-leaflet .leaflet-control-zoom a:last-child {
	border-bottom: 0;
}

/* hover like the other buttons of the map (.espmaps-button): tinted field in the link colour; the
   buttons are links, so without text-decoration the forum's link hover underlined the + and - */
.espmaps-leaflet .leaflet-control-zoom a {
	text-decoration: none;
}

.espmaps-leaflet .leaflet-control-zoom a:hover,
.espmaps-leaflet .leaflet-control-zoom a:focus-visible {
	background: color-mix( in srgb, var( --espmaps-link ) 10%, var( --espmaps-bg ) );
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-leaflet .leaflet-control-zoom a.leaflet-disabled {
	background: var( --espmaps-bg );
	color: var( --espmaps-text-muted );
	opacity: 0.6;
}

.espmaps-leaflet.leaflet-touch .leaflet-bar {
	border: 1px solid var( --espmaps-border );
}

.espmaps-app .leaflet-bottom.leaflet-right {
	padding-bottom: env( safe-area-inset-bottom, 0px );
}

/* Storeys (Caitiff, "Höhlen | Festung", MapApp.addStoreySwitches): left of the zoom buttons, lined
   up at their bottom edge; the segmented control of the map switch with the frame of the zoom */
/* (Leaflet puts a control added later in front of the others in a bottom corner) */
.espmaps-leaflet.has-storeys .leaflet-bottom.leaflet-right {
	display: flex;
	align-items: flex-end;
}

.espmaps-leaflet .espmaps-storeys.leaflet-control {
	margin-right: 8px;
	box-shadow: var( --espmaps-shadow );
}

/* button reset below the specificity of .espmaps-seg-item:hover and .is-active */
.espmaps-storeys button {
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------- markers */

.espmaps-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.45 );
	background: var( --espmaps-game-none );
}

.espmaps-game-mw {
	background: var( --espmaps-game-mw );
}

.espmaps-game-ob {
	background: var( --espmaps-game-ob );
}

.espmaps-game-sr {
	background: var( --espmaps-game-sr );
}

.espmaps-game-si {
	background: var( --espmaps-game-si );
}

.espmaps-marker,
.espmaps-selection {
	display: grid;
	place-items: center;
}

.espmaps-marker {
	border-radius: 3px;
}

.espmaps-marker-img {
	display: block;
	width: var( --espmaps-marker-size );
	height: var( --espmaps-marker-size );
	max-width: none !important;
}

.espmaps-marker:hover .espmaps-marker-img,
.espmaps-marker:hover .espmaps-dot {
	filter: drop-shadow( 0 0 2px #fff8ec );
}

.espmaps-marker:focus-visible {
	outline: 2px solid #fff8ec;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #1a0f0c;
}

/* Permanent labels for settlements and castles: light text with a dark halo. A click on the
   name selects the place like a click on its symbol: on a zone the name of a city lies on the
   area of the city level, and a click that went through opened the city instead (#115). */
.espmaps-marker-label {
	position: absolute;
	left: calc( var( --espmaps-marker-size ) + 2px );
	top: 50%;
	transform: translateY( -50% );
	font: 700 12.5px/1 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	color: #fff8ec;
	white-space: nowrap;
	text-shadow: 0 0 3px #1a0f0c, 0 0 2px #1a0f0c, 0 1px 1px #000, 0 0 6px rgba( 0, 0, 0, 0.6 );
	cursor: pointer;
}

.espmaps-marker--nolabel .espmaps-marker-label {
	display: none;
}

/* Name left of the symbol where it has no room on the right (MarkerLayers.declutter) */
.espmaps-marker--label-left .espmaps-marker-label {
	left: auto;
	right: calc( var( --espmaps-marker-size ) + 2px );
}

/* A symbol that would cover a stronger place waits for a closer zoom (MarkerLayers.declutter) */
.espmaps-marker--deferred {
	visibility: hidden;
}

.espmaps-selection {
	border-radius: 50%;
	transform-origin: center;
	box-shadow: 0 0 0 3px #fff8ec, 0 0 0 5px #7a1a2a, 0 2px 10px 5px rgba( 0, 0, 0, 0.45 );
	background: rgba( 255, 248, 236, 0.85 );
}

.espmaps-selection .espmaps-marker-img,
.espmaps-selection .espmaps-dot {
	transform: scale( 1.2 );
}

/* ------------------------------------------------------- layered maps (ESO) */

.espmaps-game-eso {
	background: var( --espmaps-game-eso );
}

/* pin types without an icon of the icon set: skyshards as a light blue diamond */
.espmaps-dot.espmaps-type-skyshard {
	width: 11px;
	height: 11px;
	border-radius: 2px;
	transform: rotate( 45deg );
	background: #7fd3f0;
}

/* quests (#130): a gold disc with an exclamation mark, like the quest givers in the game */
.espmaps-dot.espmaps-type-quest {
	position: relative;
	width: 14px;
	height: 14px;
	border: 1px solid #3b2a12;
	background: #f0c44c;
}

.espmaps-dot.espmaps-type-quest::after {
	content: '!';
	position: absolute;
	inset: 0;
	font: 700 11px/12px sans-serif;
	text-align: center;
	color: #3b2a12;
}

/* Transitus network of Cyrodiil (#131): neutral like the keeps, a light casing under a dotted
   line, so the links read as routes and not as roads or borders of the painting */
.espmaps-link-casing {
	stroke: #fbf1d9;
	stroke-width: 3.5px;
	stroke-opacity: 0.35;
	stroke-linecap: round;
	fill: none;
}

.espmaps-link {
	stroke: #7a1a2a;
	stroke-width: 2.1px;
	stroke-opacity: 0.65;
	stroke-dasharray: 0.1 5;
	stroke-linecap: round;
	fill: none;
}

/* wider than the line, invisible: takes the mouse (hover names the keeps, click opens the preview) */
.espmaps-link-hit {
	stroke: #000;
	stroke-width: 14px;
	stroke-opacity: 0;
	stroke-linecap: round;
	fill: none;
	cursor: pointer;
}

.espmaps-link.is-hover,
.is-links-far .espmaps-link.is-hover {
	stroke-opacity: 1;
	stroke-width: 3px;
}

/* the selection of a line (preview) and the line in the filter list */
.espmaps-dot.espmaps-type-link,
.espmaps-link-icon {
	display: inline-block;
	width: 16px;
	height: 5px;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	background: radial-gradient( circle, #7a1a2a 1.2px, transparent 1.6px ) 0 50% / 5px 5px repeat-x, #fbf1d9;
	vertical-align: middle;
}

/* the whole zone in view (LINKS_NEAR_ZOOM in espmaps.js): finer, the network stays readable
   without covering the painting (18.10.2026: too wide at first) */
.is-links-far .espmaps-link-casing {
	stroke-width: 2.5px;
	stroke-opacity: 0.3;
}

.is-links-far .espmaps-link {
	stroke-width: 1.6px;
	stroke-opacity: 0.6;
	stroke-dasharray: 0.1 3.5;
}

/* dig sites of the antiquities (#130): a brown square with a light edge, like disturbed earth */
.espmaps-dot.espmaps-type-digsite {
	width: 10px;
	height: 10px;
	border: 2px solid #e9c98f;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #3b2a12;
	background: #7a4a1e;
}

.espmaps-dot.espmaps-type-zone {
	border-radius: 2px;
	background: transparent;
	border-color: var( --espmaps-border-feature );
	box-shadow: none;
}

/* Zone areas on the world map: invisible until hovered (the painting has the borders), then
   the area lights up with a thin line along its border. */
.espmaps-zone {
	stroke: #7a1a2a;
	stroke-width: 2px;
	stroke-linejoin: round;
	stroke-opacity: 0;
	fill: #fffaf0;
	fill-opacity: 0;
	cursor: pointer;
	transition: fill-opacity 0.2s, stroke-opacity 0.2s;
}

/* Kept light: the parchment of the map stays visible under it (18.10.2026; 50 % stood out) */
.espmaps-zone.is-hover,
.espmaps-zone:hover {
	stroke-width: 1.5px;
	stroke-opacity: 0.6;
	fill-opacity: 0.2;
}

@media ( prefers-reduced-motion: reduce ) {
	.espmaps-zone {
		transition: none;
	}
}

.leaflet-tooltip.espmaps-zone-tip {
	font: 600 var( --espmaps-font-smaller )/1.2 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Zone names: dark text with a light halo, readable on the parchment of the ESO maps. */
.espmaps-zone-label {
	display: grid;
	place-items: center;
	width: 0 !important;
	height: 0 !important;
}

.espmaps-zone-label span {
	font: 700 13px/1.1 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	color: #2b1a10;
	white-space: nowrap;
	text-shadow: 0 0 3px #fff8ec, 0 0 2px #fff8ec, 0 0 6px rgba( 255, 248, 236, 0.9 );
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 3px;
}

.espmaps-zone-label:hover span {
	color: #7a1a2a;
}

.espmaps-zone-label:focus-visible {
	outline: none;
}

.espmaps-zone-label:focus-visible span {
	outline: 2px solid #7a1a2a;
	outline-offset: 1px;
}

.espmaps-zone-label.is-hidden {
	display: none;
}

/* A city has its name as a place of the zone: its label is only for the keyboard. */
.espmaps-zone-label.is-city:not( :focus-visible ) span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Names of lands, islands, game worlds and zones (#240, MapApp.addNames, zoneName): part of the
   map image, in Fondamento, a free font in the hand of the ESO map. They are outlines, not text
   (data/map-names.json "glyphs", computed by tools/maps/names/build_names.py with the font in
   tools/maps/names/fonts): text is set anew at every zoom step and snapped to the pixels, and
   the names wobbled while zooming. Each name is an SVG whose viewBox is its ink at 100 px,
   scaled to its box on the map. Ink on the land and on ESO's parchment, light on the dark sea
   of the Tamriel map, light with a dark rim on the terrain of a game world. */
.espmaps-names,
.espmaps-name {
	pointer-events: none;
	overflow: visible;
}

.espmaps-name-text {
	paint-order: stroke;
	stroke-linejoin: round;
	pointer-events: visiblePainted;
	cursor: pointer;
	transition: opacity 0.2s;
}

.espmaps-name--ink .espmaps-name-text {
	fill: #4b3a28;
	fill-opacity: 0.7;
}

.espmaps-name--light .espmaps-name-text {
	fill: #efe3c8;
	fill-opacity: 0.75;
}

.espmaps-name--world .espmaps-name-text {
	fill: #f6eedc;
	fill-opacity: 0.92;
	stroke: #1c140b;
	stroke-opacity: 0.55;
	stroke-width: 16px;
}

.espmaps-name-text:hover,
.espmaps-name-text:focus-visible {
	fill-opacity: 0.95;
}

.espmaps-name-text:focus-visible {
	outline: 2px solid #7a1a2a;
	outline-offset: 2px;
}

/* the names of game worlds give way to the cities from zoom 2 on (NAMES_WORLD_ZOOM) */
.is-names-near .espmaps-name--world .espmaps-name-text {
	opacity: 0;
	pointer-events: none;
}

/* roads and rivers of a level (addLevelPaths in espmaps.js), each group switched off in the filter */
.is-paths-borders-off .espmaps-paths-borders,
.is-paths-roads-off .espmaps-paths-roads,
.is-paths-tracks-off .espmaps-paths-tracks,
.is-paths-rivers-off .espmaps-paths-rivers,
.is-paths-streams-off .espmaps-paths-streams {
	display: none;
}

/* filter "Namen von Ländern und Inseln" off: no names; ESO's zones show their labels again */
.is-names-off .espmaps-names {
	display: none;
}

.espmaps-zone-label.has-name:not( :focus-visible ) span {
	opacity: 0;
}

.is-names-off .espmaps-zone-label.has-name span {
	opacity: 1;
}

/* a name of a land shows itself: the preview needs no mark on it */
.espmaps-selection.is-name {
	display: none;
}

/* The parent around a city or zone (aroundLayer): its canvas tiles overlap by a pixel, else
   the scaling between the zoom steps shows hairlines between them (Leaflet's own fix for
   image tiles, mix-blend-mode, would add the parent to the level below) */
.espmaps-around .leaflet-tile {
	width: 257px !important;
	height: 257px !important;
}

/* The level just left, in the new one until its tiles are there (MapApp.ghostLevel,
   levelGhost): the holder pans and zooms with the map, the ghost inside fades out */
.espmaps-level-ghost-holder {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}

.espmaps-level-ghost {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transition: opacity 0.3s ease-out;
}

.espmaps-level-ghost.is-fading {
	opacity: 0;
}

.espmaps-level-ghost-holder.is-small .espmaps-level-ghost {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent ), linear-gradient( to bottom, transparent, #000 6%, #000 94%, transparent );
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent ), linear-gradient( to bottom, transparent, #000 6%, #000 94%, transparent );
	mask-composite: intersect;
}

/* Zones, places and names of the new level fade in while the old one fades out */
.espmaps-level-in {
	animation: espmaps-level-in 0.3s ease-out;
}

@keyframes espmaps-level-in {
	from {
		opacity: 0;
	}
}

/* No highlight of the zone under the pointer while the wheel zooms (bindLevelWheel) */
.espmaps-map.is-wheeling .espmaps-zone {
	fill-opacity: 0;
	stroke-opacity: 0;
}

.espmaps-map.is-wheeling .espmaps-zone-tip {
	visibility: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.espmaps-level-ghost {
		transition: none;
	}

	.espmaps-level-in {
		animation: none;
	}
}

/* Breadcrumbs Tamriel › Zone and Back, over the top left corner of the map */
.espmaps-crumbs {
	position: absolute;
	top: 10px;
	left: 10px;
	/* above the map, below the toolbar and its menus */
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc( 100% - 20px );
	padding: 4px 6px;
	border-radius: var( --espmaps-radius-small );
	background: var( --espmaps-bg );
	box-shadow: var( --espmaps-shadow );
	font-size: var( --espmaps-font-small );
}

.espmaps-crumbs-up {
	min-height: 30px;
	padding: 0 10px;
	gap: 4px;
}

.espmaps-crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0 4px;
	list-style: none;
}

.espmaps-crumbs-list li {
	margin: 0;
}

.espmaps-crumbs-list li + li::before {
	content: '›';
	padding: 0 6px;
	color: var( --espmaps-text-muted );
}

.espmaps-crumbs-list a {
	color: var( --espmaps-link );
	text-decoration: none;
}

.espmaps-crumbs-list a:hover,
.espmaps-crumbs-list a:focus-visible {
	text-decoration: underline;
}

.espmaps-crumbs-list [ aria-current ] {
	font-weight: 700;
}


.espmaps-panel-alt,
.espmaps-panel-note {
	margin: 4px 0 0;
	font-size: var( --espmaps-font-smaller );
	color: var( --espmaps-text-dimmed );
}

.espmaps-panel-note {
	font-style: italic;
}

/* below the text of the article: the game's own text (ESO), set off by a line */
.espmaps-panel-note.is-below {
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid var( --espmaps-border );
}

/* several quests at one quest giver (ESO, #130): title and short description each */
.espmaps-panel-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.espmaps-panel-list li {
	margin: 0 0 8px;
}

.espmaps-panel-list-title {
	display: block;
	font-weight: 600;
}

.espmaps-panel-list-note {
	display: block;
	font-size: var( --espmaps-font-smaller );
	font-style: italic;
	color: var( --espmaps-text-dimmed );
}

/* ---------------------------------------------------------------------- minimap */

/*
 * Server markup (no-JS state): tabs, a link with absolutely positioned 256-px tiles around the
 * point and a pin, a foot link. The script replaces the link by a Leaflet map of the same size.
 */
/* In an infobox the minimap fills the cell instead of its own width ({{#karte}} breite), so
   nothing is left free next to it (Ort infoboxes, Stadtinfo; wish of 2026-10-19). */
.templateInfoBox .espmaps-mini {
	width: 100% !important;
}

.espmaps-mini {
	box-sizing: border-box;
	max-width: 100%;
	/* own stacking context: the z-indexes of Leaflet's panes and controls (400–1000) and of the
	   switches stay inside the minimap instead of rising over the pinned navigation bar */
	isolation: isolate;
	position: relative;
	background: var( --espmaps-bg );
	border: 1px solid var( --espmaps-border );
	font-size: var( --espmaps-font-smaller );
	line-height: 1.4;
}

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

/* Controls on the map (decision of 2026-10-21): no bar above and no line below the map any more,
   so more of the map shows. Maps and "Lage | Umgebung" lie as buttons in the top row of the map,
   the link to the big map is a button in the top right corner, zoom stays bottom right; all
   controls 24 px high in the style of the zoom buttons. Where the buttons do not fit in one row
   (the Lagekarte of 200 px), the script turns each row into a switch with a popup, top left
   (.is-compact, MiniMap.fit()). Without JavaScript the buttons wrap. */
.espmaps-mini-tabs {
	position: absolute;
	z-index: 1001;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px 8px;
	/* room for the button to the big map */
	padding: 6px 34px 6px 6px;
	pointer-events: none;
}

.espmaps-mini.is-enhanced .espmaps-mini-tabs {
	flex-wrap: nowrap;
}

.espmaps-mini-tabs a,
.espmaps-mini-tabs button {
	pointer-events: auto;
}

/* the maps: one segmented button like "Lage | Umgebung", since it is one or the other (2026-10-21) */
.espmaps-mini-maps {
	display: flex;
	height: 24px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	box-shadow: var( --espmaps-shadow );
	overflow: hidden;
}

/* the switch around a row (script): in the wide layout only the row shows */
.espmaps-mini-switch {
	position: relative;
	display: flex;
}

.espmaps-mini-switch-button {
	display: none;
}

/* "Lage | Umgebung": a segmented switch after the maps, top left like them (2026-10-21), as
   high as one button */
.espmaps-mini-modes {
	display: flex;
	height: 24px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	box-shadow: var( --espmaps-shadow );
	overflow: hidden;
}

.espmaps-mini-mode {
	height: 22px;
	padding: 0 8px;
	background: var( --espmaps-bg );
	color: var( --espmaps-button-text );
	font-size: var( --espmaps-font-smallest );
	font-weight: 600;
	line-height: 22px;
	white-space: nowrap;
	text-decoration: none;
}

.espmaps-mini-mode + .espmaps-mini-mode {
	border-left: 1px solid var( --espmaps-border );
}

.espmaps-mini-mode:hover {
	background: var( --espmaps-bg-alt );
	color: var( --espmaps-link-hover );
	text-decoration: none;
}

.espmaps-mini-mode.is-active {
	background: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
}

/* Places of the town in the city view: the symbols of the big map, a little smaller */
.espmaps-mini-place {
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, 0.5 ) );
}

.espmaps-mini-place--dot {
	border-radius: 50%;
	border: 1px solid #fff8ec;
	background: #6b4f2a;
}

.espmaps-mini-tab,
.espmaps-mini-switch-button,
.espmaps-mini-full {
	height: 24px;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	background: var( --espmaps-bg );
	background-clip: padding-box;
	box-shadow: var( --espmaps-shadow );
	color: var( --espmaps-button-text );
	font-size: var( --espmaps-font-smallest );
	font-weight: 600;
	line-height: 22px;
	white-space: nowrap;
	text-decoration: none;
}

.espmaps-mini-tab {
	height: 22px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.espmaps-mini-tab + .espmaps-mini-tab {
	border-left: 1px solid var( --espmaps-border );
}

/* solid on hover: the buttons lie on the map */
.espmaps-mini-tab:hover,
.espmaps-mini-switch-button:hover,
.espmaps-mini-switch.is-open .espmaps-mini-switch-button,
.espmaps-mini-full:hover {
	background: var( --espmaps-bg-alt );
	color: var( --espmaps-link-hover );
	text-decoration: none;
}

.espmaps-mini-tab.is-active {
	background: var( --espmaps-primary-bg );
	color: var( --espmaps-primary-text );
	text-decoration: none;
}

.espmaps-mini-view,
.espmaps-mini-stage {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 120px;
	background: #33505f;
}

/* Tile and pin positions are relative to the centre (MiniMap::tiles()), so the place stays in the
   middle at any width of the box. */
.espmaps-mini-tiles {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
}

.espmaps-mini-tiles img {
	position: absolute;
	display: block;
	/* 1 px overlap against seams, like the Leaflet tiles (see .espmaps-leaflet img.leaflet-tile) */
	width: 257px;
	height: 257px;
	max-width: none !important;
	border: 0;
}

.espmaps-mini-view:focus-visible {
	outline: 3px solid var( --espmaps-link );
	outline-offset: -3px;
}

/* The same pin in the static preview and on the Leaflet minimap, so nothing jumps. */
.espmaps-mini-pin,
.espmaps-pin {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff8ec;
	background: #7a1a2a;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.5 ), 0 2px 5px rgba( 0, 0, 0, 0.5 );
}

.espmaps-mini-pin {
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	margin: -7px 0 0 -7px;
}

.espmaps-mini-map {
	position: absolute;
	inset: 0;
}

.espmaps-mini-hint {
	position: absolute;
	z-index: 1001;
	left: 6px;
	bottom: 6px;
	padding: 2px 7px;
	border: 0;
	border-radius: var( --espmaps-radius-pill );
	/* nearly opaque: the text must stay readable (WCAG AA) on any map below it */
	background: color-mix( in srgb, var( --espmaps-bg ) 94%, transparent );
	color: var( --espmaps-text );
	font: inherit;
	font-size: var( --espmaps-font-smallest );
	font-weight: 600;
	cursor: pointer;
	/* Only while the pointer is over the map (or the keyboard is on it, or a finger touched it
	   while scrolling, .is-hinting): a permanent badge on every minimap was too prominent
	   (2026-10-20). Hidden it lets clicks through, the map activates on a click anyway. */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}

.espmaps-mini-stage:hover .espmaps-mini-hint,
.espmaps-mini-stage.is-hinting .espmaps-mini-hint,
.espmaps-mini-hint:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.espmaps-mini-hint:focus-visible {
	outline: 2px solid var( --espmaps-link );
	outline-offset: 2px;
}

.espmaps-mini .espmaps-leaflet .leaflet-control-zoom {
	margin: 0 6px 6px 0;
	border-radius: var( --espmaps-radius-medium );
}

.espmaps-mini .espmaps-leaflet .leaflet-control-zoom a,
.espmaps-mini .espmaps-leaflet.leaflet-touch .leaflet-control-zoom a {
	width: 24px;
	height: 24px;
	font-size: var( --espmaps-font-normal );
	line-height: 22px;
}

/* the big map: always in the top right corner */
.espmaps-mini-full {
	position: absolute;
	z-index: 1001;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	padding: 0;
}

.espmaps-mini-full::before {
	content: '\2922';
	font-size: var( --espmaps-font-small );
	font-weight: 400;
}

.espmaps-mini-full:focus-visible,
.espmaps-mini-tab:focus-visible,
.espmaps-mini-mode:focus-visible,
.espmaps-mini-switch-button:focus-visible {
	outline: 2px solid var( --espmaps-link );
	outline-offset: 1px;
}

/* Narrow minimaps (.is-compact): each row is a switch with the active entry, top left; its
   popup lists the entries one below the other, the active one ticked */
.espmaps-mini.is-compact .espmaps-mini-switch {
	margin-left: 0;
}

.espmaps-mini.is-compact .espmaps-mini-switch-button {
	display: block;
	padding: 0 7px;
	font-family: inherit;
	cursor: pointer;
}

.espmaps-mini.is-compact .espmaps-mini-switch-button::after {
	content: ' \25BE';
}

.espmaps-mini.is-compact .espmaps-mini-switch > .espmaps-mini-maps,
.espmaps-mini.is-compact .espmaps-mini-switch > .espmaps-mini-modes {
	display: none;
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	flex-direction: column;
	height: auto;
	min-width: 100%;
	gap: 0;
	margin: 0;
	border: 1px solid var( --espmaps-border );
	border-radius: var( --espmaps-radius-medium );
	background: var( --espmaps-bg );
	box-shadow: var( --espmaps-shadow );
	/* the 21 areas of Shadowkey are taller than the minimap, which clips the popup: it scrolls
	   (max-height from MiniMap.openSwitch) */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.espmaps-mini.is-compact .espmaps-mini-switch.is-open > .espmaps-mini-maps,
.espmaps-mini.is-compact .espmaps-mini-switch.is-open > .espmaps-mini-modes {
	display: flex;
}

.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-tab,
.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-mode {
	height: auto;
	padding: 5px 10px 5px 8px;
	border: 0;
	border-radius: 0;
	background: var( --espmaps-bg );
	box-shadow: none;
	color: var( --espmaps-button-text );
	font-weight: 400;
	line-height: 1.3;
}

.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-tab + .espmaps-mini-tab,
.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-mode + .espmaps-mini-mode {
	border-top: 1px solid var( --espmaps-border );
	border-left: 0;
}

.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-tab:hover,
.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-mode:hover {
	background: var( --espmaps-bg-alt );
	color: var( --espmaps-link-hover );
}

.espmaps-mini.is-compact .espmaps-mini-switch .is-active {
	font-weight: 700;
}

.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-tab::before,
.espmaps-mini.is-compact .espmaps-mini-switch .espmaps-mini-mode::before {
	content: '\2713';
	display: inline-block;
	width: 1.2em;
	visibility: hidden;
}

.espmaps-mini.is-compact .espmaps-mini-switch .is-active::before {
	visibility: visible;
}

/* ------------------------------------------------------------------ page shells */

/* Forum map page (template esp_maps_view): the frame of the card (border, radius, page gutter)
   comes from esp_maps.less of ESP/Core, which knows the style properties. */
html[ data-template='esp_maps_view' ] .p-body-main,
html[ data-template='esp_maps_view' ] .p-body-content,
html[ data-template='esp_maps_view' ] .p-body-pageContent {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------- motion */

@media ( prefers-reduced-motion: reduce ) {
	.espmaps-panel,
	.espmaps-mini-hint,
	.espmaps-app .leaflet-zoom-anim .leaflet-zoom-animated,
	.espmaps-mini .leaflet-zoom-anim .leaflet-zoom-animated {
		transition: none !important;
	}
}

@media print {
	.espmaps-toolbar,
	.espmaps-panel,
	.espmaps-mini-hint,
	.espmaps-leaflet .leaflet-control-container {
		display: none !important;
	}
}