/*
 * WHERE Explore widget (ex- namespace).
 * Card style matches the existing Places grid: full-bleed background image,
 * dark gradient overlay, gold location pill, white title, type label below.
 * Thumb view = image-dominant grid, Card view = horizontal cards.
 *
 * Container queries (940 / 700 / 440) — works full-width and half-width.
 */

.ex-widget {
	--ex-accent: #3a759f;
	--ex-accent-soft: #e8f2f6;
	--ex-ink: #262827;
	--ex-muted: #6d726f;
	--ex-line: #dfe5e1;
	--ex-shell: #f2f4f1;
	--ex-shell-2: #e9ede8;
	--ex-radius: 12px;
	--ex-gutter: clamp(18px, 3vw, 32px);
	--ex-pill-bg: var(--ex-accent);
	--ex-pill-ink: var(--ex-accent-ink, #1c1c1a);
	--ex-tools-h: 54px;

	container-type: inline-size;
	overflow: visible;
	padding: var(--ex-gutter);
	border: 1px solid var(--ex-line);
	border-radius: 16px;
	background: var(--ex-shell);
	color: var(--ex-ink);
	font-family: inherit;
	line-height: 1.45;
}
.ex-widget *, .ex-widget *::before, .ex-widget *::after { box-sizing: border-box; }
.ex-widget [hidden] { display: none !important; }

/* Head -------------------------------------------------------------------- */
.ex-head { margin: 0 0 18px; }
.ex-eyebrow { display: block; margin: 0 0 6px; color: var(--ex-accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ex-heading { margin: 0; font-size: clamp(20px, 2.6cqi + 14px, 30px); line-height: 1.15; }
.ex-copy { margin: 8px 0 0; max-width: 62ch; color: var(--ex-muted); font-size: 14px; }

/* Layout: sidebar + main -------------------------------------------------- */
.ex-layout {
	display: grid;
	grid-template-columns: var(--ex-sb-w, 260px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.ex-widget.where-rail-collapsed .ex-layout { grid-template-columns: 1fr; }
.ex-widget.where-rail-collapsed .ex-sidebar { display: none; }

.ex-sidebar {
	position: sticky;
	/* Same fallback as .ex-topbar so the sidebar and submenu pin at the
	   same height when the theme doesn't set --where-sticky-offset. */
	top: var(--where-sticky-offset, 132px);
}
/* v0.17.0: drag pill on the sidebar's inner edge resizes the column,
   matching the map handle. JS clamps it between 220px and 1/3. */
/* v0.25.0: square pill (5px corners, 2x4 dots, no hover recolor) centered
   ON the sidebar's edge line - half in, half out. */
.ex-sb-handle { position: absolute; top: 0; bottom: 0; right: -8px; width: 16px; z-index: 30; cursor: ew-resize; touch-action: none; }
/* v0.29.5: same 16x32 pill, but the 2x4 dot grid sits on a tighter 5px
   pitch clipped to a centered content box (the white underlay keeps the
   full pill painted). */
.ex-sb-handle::after { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 32px; transform: translateY(-50%); box-sizing: border-box; padding: 6px 3px; background-color: #fff; border: 1px solid var(--ex-line); border-radius: 5px; box-shadow: 0 2px 8px rgba(15, 22, 18, .25); background-image: radial-gradient(circle, #6b7570 1.2px, transparent 1.45px), linear-gradient(#fff, #fff); background-repeat: repeat, no-repeat; background-size: 5px 5px, auto; background-position: 0 0, 0 0; background-clip: content-box, border-box; }
.ex-widget.ex-side-right .ex-sb-handle { right: auto; left: -8px; }
/* The panel scrolls internally (not the aside) so the hide/show side tabs
   can hang outside the sidebar without getting clipped. */
.ex-panel { display: flex; flex-direction: column; gap: 18px; padding: 16px; border: 1px solid var(--ex-line); border-radius: var(--ex-radius); background: #fff; max-height: calc(100vh - var(--where-sticky-offset, 132px) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Facets ------------------------------------------------------------------ */
.ex-facet { display: flex; flex-direction: column; gap: 9px; }
.ex-facet-label { color: var(--ex-ink); font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ex-search { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid #d7dcd8; border-radius: 8px; background: #fff; color: var(--ex-ink); font: inherit; font-size: 13px; }
.ex-search:focus { border-color: var(--ex-accent); outline: none; }
/* The SEARCH hint lives inside the bar now - no separate label above it. */
[data-ex-search-input]::placeholder { color: var(--ex-ink); opacity: .55; font-weight: 800; letter-spacing: .09em; }

/* Location tree ----------------------------------------------------------- */
.ex-loc-tree { max-height: 320px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.ex-loc-list { margin: 0; padding: 0; list-style: none; }
.ex-loc-list .ex-loc-list { padding-left: 18px; }
.ex-loc-item { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 2px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ex-loc-item:hover { background: var(--ex-accent-soft); }
.ex-loc-item input { width: 15px; height: 15px; margin: 0; accent-color: var(--ex-accent); cursor: pointer; }
.ex-loc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-loc-count { flex: 0 0 auto; color: var(--ex-muted); font-size: 11px; font-weight: 700; }
.ex-loc-item.is-zero { opacity: .38; }
.ex-loc-item.is-zero input { cursor: not-allowed; }
.ex-loc-branch { border: 0; }
.ex-loc-summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; }
.ex-loc-summary::-webkit-details-marker { display: none; }
.ex-loc-summary .ex-loc-item { flex: 1 1 auto; }
.ex-loc-caret { flex: 0 0 auto; width: 22px; height: 22px; position: relative; border-radius: 5px; opacity: 0; transition: opacity .12s ease; }
.ex-loc-caret::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ex-muted); border-bottom: 2px solid var(--ex-muted); transform: translate(-50%, -60%) rotate(45deg); transition: transform .12s ease; }
.ex-loc-branch[open] > .ex-loc-summary .ex-loc-caret::before { transform: translate(-50%, -40%) rotate(225deg); }
.ex-loc-caret:hover { background: var(--ex-accent-soft); }
/* Arrows stay invisible until the branch is hovered, focused, or expanded ("active") */
.ex-loc-summary:hover .ex-loc-caret,
.ex-loc-summary:focus-within .ex-loc-caret,
.ex-loc-branch[open] > .ex-loc-summary .ex-loc-caret { opacity: 1; }
.ex-loc-trailing-count { flex: 0 0 auto; color: var(--ex-muted); font-size: 11px; font-weight: 700; }

/* Type pills -------------------------------------------------------------- */
.ex-type-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.ex-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 11px; border: 1px solid #d7dcd8; border-radius: 999px; background: #fff; color: #434845; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.ex-pill:hover { border-color: #aab7b0; }
.ex-pill.is-active { border-color: #333333; background: #333333; color: #fff; }
.ex-pill.is-zero { opacity: .38; cursor: not-allowed; }
.ex-pill-count { font-size: 10px; font-weight: 800; opacity: .75; }

/* Feature chips ----------------------------------------------------------- */
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border: 1px solid #d7dcd8; border-radius: 999px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; }
.ex-chip:hover { border-color: #aab7b0; }
.ex-chip input { width: 14px; height: 14px; margin: 0; accent-color: var(--ex-accent); cursor: pointer; }
.ex-chip:has(input:checked) { border-color: #777777; background: #777777; color: #fff; }
.ex-chip:has(input:checked) .ex-chip-count { color: rgba(255, 255, 255, .8); }
.ex-chip-count { color: var(--ex-muted); font-size: 10px; font-weight: 800; }
.ex-chip.is-zero { opacity: .38; }
.ex-chip.is-zero input { cursor: not-allowed; }

.ex-reset { min-height: 38px; padding: 8px 12px; border: 1px solid var(--ex-line); border-radius: 8px; background: #fff; color: var(--ex-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.ex-reset:hover { border-color: var(--ex-accent); color: var(--ex-accent); }

/* Topbar ------------------------------------------------------------------- */
/* Sticky, matching Gear List's .gl-tools bar: the current group title is
   mirrored into .ex-current-chip as it scrolls under the bar, and the
   prev/next carets in .ex-group-nav jump between group heads. */
.ex-topbar {
	position: sticky;
	top: var(--where-sticky-offset, 132px);
	z-index: 30;
	margin: 0 0 14px;
	padding: 10px 12px;
	/* A tad darker than the widget shell for better separation; the Submenu
	   Background color picker overrides it via --ex-topbar-bg. */
	background: var(--ex-topbar-bg, var(--ex-shell-2, #e9ede8));
	border: 1px solid var(--ex-line);
	border-radius: 10px;
	box-shadow: 0 6px 14px rgba(30, 45, 38, .05);
}
.ex-topbar::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: calc(100% + 1px); height: 0; background: var(--ex-shell); pointer-events: none; }
.ex-widget.ex-is-stuck .ex-topbar::before { height: calc(var(--where-sticky-offset, 132px) + 26px); }
.ex-topbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; background: rgba(15, 22, 18, .05); border-radius: 10px; padding: 6px 10px; }
.ex-topbar-left { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ex-topbar-controls { justify-self: end; display: flex; align-items: center; gap: 12px; }
/* Results tally: slim bar stuck to the bottom of the screen while the grid
   scrolls (it sits at the end of the main column, so it releases when the
   widget ends). */
.ex-count { position: sticky; bottom: 0; z-index: 25; margin: 14px 0 0; padding: 8px 14px; border-top: 1px solid var(--ex-line); border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .93); backdrop-filter: blur(4px); color: var(--ex-muted); font-size: 12px; white-space: nowrap; text-align: center; }
.ex-current-chip { display: inline-flex; align-items: center; min-height: 34px !important; max-width: 260px; padding: 7px 14px !important; border-radius: 8px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-current-chip.ex-swap { animation: ex-chip-swap .18s ease; }
@keyframes ex-chip-swap { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ex-group-nav { display: flex; align-items: center; gap: 4px; }
.ex-group-jump { min-width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--ex-line); border-radius: 8px; background: #fff; color: var(--ex-ink); font-size: 11px; line-height: 1; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ex-group-jump:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-group-jump:focus-visible { outline: 3px solid #83b9dc; outline-offset: 2px; }
/* Matches .ex-section-count exactly - sits to the right of the jump carets. */
.ex-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 2px; border-radius: 999px; background: var(--ex-accent-soft); color: var(--ex-accent); font-size: 11px; font-weight: 800; }
/* Asc/desc toggle: stacked arrows, the active direction lit in accent. */
.ex-sort-dir { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 34px; min-height: 36px; padding: 0; border: 1px solid var(--ex-line); border-radius: 8px; background: #fff; cursor: pointer; line-height: 1; }
.ex-sort-dir span { display: block; color: #c3c9c4; font-size: 8px; transition: color .12s ease; }
.ex-sort-dir .ex-dir-up { color: var(--ex-accent); }
.ex-sort-dir.is-desc .ex-dir-up { color: #c3c9c4; }
.ex-sort-dir.is-desc .ex-dir-down { color: var(--ex-accent); }
.ex-sort-dir:hover { border-color: var(--ex-accent); }
/* Compact Sort / Group dropdowns: just the word in the field; options in a floating menu. */
.ex-dd { position: relative; }
.ex-dd-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--ex-line); border-radius: 8px; background: #fff; color: var(--ex-ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.ex-dd-btn:hover { border-color: var(--ex-accent); }
.ex-dd-caret { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--ex-muted); border-bottom: 2px solid var(--ex-muted); transform: rotate(45deg); }
.ex-dd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 175px; padding: 6px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(25, 35, 30, .14); }
.ex-dd-opt { display: flex; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ex-ink); cursor: pointer; font: inherit; font-size: 13px; text-align: left; white-space: nowrap; }
.ex-dd-opt:hover { background: var(--ex-shell); }
.ex-dd-opt.is-active { font-weight: 700; color: var(--ex-accent); }
.ex-dd-opt.is-active::after { content: '\2713'; margin-left: auto; padding-left: 12px; font-weight: 800; }

/* View switch ------------------------------------------------------------- */
.ex-view-switch { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; }
.ex-view-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ex-muted); cursor: pointer; }
.ex-view-btn.is-active { background: #fff; color: var(--ex-ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ex-view-btn.is-active .ex-view-icon i { background: var(--ex-accent); }
.ex-view-icon { display: grid; gap: 2px; width: 14px; height: 14px; }
.ex-view-icon i { display: block; background: currentColor; border-radius: 2px; }
.ex-view-icon-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.ex-view-icon-card { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
.ex-view-icon-card i { height: 4px; }

/* Column stepper (-/+) beside the view switch. */
.ex-cols { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; }
.ex-cols-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ex-muted); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; }
.ex-cols-btn:hover { background: #f0f2f0; color: var(--ex-ink); }

/* Active filter chips ----------------------------------------------------- */
.ex-active { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.ex-active-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 11px; border: 1px solid var(--ex-accent); border-radius: 999px; background: var(--ex-accent-soft); color: var(--ex-accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.ex-active-x { font-size: 14px; line-height: 1; }
.ex-active-chip:hover { background: var(--ex-accent); color: var(--ex-accent-ink, #fff); }

/* ========================================================================
   THUMBNAIL VIEW CARDS — dark overlay, matches the existing Places grid
   ======================================================================== */

/* v0.25.0: grids auto-fill from a minimum card size (--ex-card-min*, set by
   the widget's column numbers against a MacBook-Pro-width reference). Every
   screen keeps the same card comfort and simply gains or loses columns; the
   toolbar -/+ nudges the size live. */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ex-card-min, 270px), 100%), 1fr)); gap: var(--ex-grid-gap, 12px); }

.ex-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ex-radius);
	background-color: #3a3c39;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
.ex-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(25, 35, 30, .25); }
/* v0.20.0: places thumbs run square. */
.ex-style-overlay .ex-card { aspect-ratio: var(--ex-thumb-ratio, 1 / 1); }
/* v0.20.0: thin inset accent stroke (never changes sizing) + a 5% dim on
   every card that lifts to full brightness on hover or selection. */
/* v0.21.0: the accent stroke only appears on hover / selection and is
   doubled to 2px; the resting state keeps just the 5% dim. */
.ex-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: rgba(0, 0, 0, .05); transition: background .16s ease, box-shadow .16s ease; }
.ex-card:hover::after, .ex-card.is-spotlit::after, .ex-card.is-map-focus::after { background: transparent; box-shadow: inset 0 0 0 2px var(--ex-item-accent, var(--ex-accent)); }

/* Dark gradient from bottom for text legibility */
.ex-card-overlay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 16px;
	background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
.ex-card-loc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--ex-loc-bg, var(--ex-pill-bg));
	color: var(--ex-loc-ink, var(--ex-pill-ink));
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px;
}
.ex-card-title {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ex-card-type {
	color: rgba(255,255,255,.75);
	font-size: 12px;
	font-weight: 500;
}

/* ========================================================================
   CARD VIEW — horizontal cards, white background, dark text
   ======================================================================== */

.ex-card-mode .ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--ex-card-min-card, 552px), 100%), 1fr)); }
.ex-body-side .ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--ex-card-min-map, 218px), 100%), 1fr)); }
.ex-card-mode .ex-body-side .ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--ex-card-min-card-map, 218px), 100%), 1fr)); }

.ex-card-mode .ex-card {
	aspect-ratio: auto;
	flex-direction: row;
	/* Thumb is a fixed 140x140 square regardless of how tall the row grows
	   with wrapping text - sizing it to "100%" of a variable-height row
	   stretched/cropped the image, which is the cut-off bug. */
	min-height: 140px;
	/* Never stretch the photo: the card's own inline background is hidden
	   (size 0) and re-used by the ::before square below with cover-crop,
	   so the image keeps its aspect ratio and crops to fit. */
	background-size: 0 0;
	background-repeat: no-repeat;
	background-color: #fff;
	border: 1px solid var(--ex-line);
	position: relative;
	overflow: hidden;
}
.ex-card-mode .ex-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 140px;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ex-card-mode .ex-card-overlay {
	flex: 1 1 auto;
	justify-content: center;
	padding: 14px 18px;
	margin-left: 140px;
	background: #fff;
}
.ex-card-mode .ex-card-loc {
	background: var(--ex-pill-bg);
	color: var(--ex-pill-ink);
}
.ex-card-mode .ex-card-title {
	color: var(--ex-ink);
	text-shadow: none;
	font-size: 16px;
}
.ex-card-mode .ex-card-type {
	color: var(--ex-muted);
}

/* ========================================================================
   GROUPING — section heads injected by JS when group-by is active
   ======================================================================== */

.ex-section-head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 12px 0 2px;
	padding-bottom: 8px;
	padding-left: 13px;
	border-bottom: 1px solid var(--ex-line);
}
.ex-section-head:first-child { margin-top: 0; }
/* Matches Gear List's .gl-section-title exactly (the pill mirrored into the
   sticky tools bar chip as you scroll) so both widgets share one group-title
   system. */
.ex-section-title { display: inline-flex; align-items: center; margin: 0 !important; min-height: 34px !important; padding: 7px 14px !important; border-radius: 8px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .01em; }
.ex-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: auto; border-radius: 999px; background: var(--ex-accent-soft); color: var(--ex-accent); font-size: 11px; font-weight: 800; }

/* ========================================================================
   LOCATION CASCADE — horizontal drill-down rail in the sticky topbar.
   Each picked level collapses into a fanned "deck": the selected pill
   stays prominent while its siblings tuck behind it to the left, half
   hidden and faded, with a small + cue. Hovering (or keyboard focus)
   fans the deck back open like an accordion so you can switch. The next
   level renders as its own horizontal scroll of pills to the right, so
   the whole rail reads like breadcrumbs: Canada › BC › Vancouver Island.
   ======================================================================== */
.ex-cascade { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ex-line); overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c3cac5 transparent; }
.ex-cascade::-webkit-scrollbar { height: 6px; }
.ex-cascade::-webkit-scrollbar-track { background: transparent; }
.ex-cascade::-webkit-scrollbar-thumb { background: #c3cac5; border-radius: 999px; }
.ex-cascade-level { display: flex; align-items: center; flex: 0 0 auto; }
.ex-cascade-level:not(.is-collapsed) { gap: 8px; }
.ex-cascade-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; color: var(--ex-ink); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ex-cascade-pill:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-cascade-pill.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
/* World globe: the root of the cascade; active when nothing is picked. */
.ex-cascade-globe { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ex-line); border-radius: 50%; background: #fff; color: var(--ex-muted); cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ex-cascade-globe:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-cascade-globe.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
/* Collapsed level: the hidden siblings peek out as staggered card edges
   (their first letters visible) before the picked pill. Hovering floats
   a + in over the deck; clicking it fans the level back open. */
.ex-cascade-deckbtn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; margin-right: 2px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ex-cascade-deck { display: flex; align-items: center; }
.ex-cascade-deck i { display: block; overflow: hidden; width: 26px; height: 32px; line-height: 30px; border: 1px solid var(--ex-line); border-radius: 8px 0 0 8px; background: #fff; color: var(--ex-muted); font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 0 0 0 7px; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 94%); mask-image: linear-gradient(90deg, #000 40%, transparent 94%); }
.ex-cascade-deck i:nth-child(1) { z-index: 3; }
.ex-cascade-deck i:nth-child(2) { margin-left: -6px; opacity: .72; z-index: 2; }
.ex-cascade-deck i:nth-child(3) { margin-left: -6px; opacity: .48; z-index: 1; }
.ex-cascade-plus { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--ex-line); border-radius: 50%; background: #fff; color: var(--ex-muted); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(25, 35, 30, .18); opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .15s ease, transform .15s ease; }
.ex-cascade-deckbtn:hover .ex-cascade-plus,
.ex-cascade-deckbtn:focus-visible .ex-cascade-plus { opacity: 1; transform: translate(-50%, -50%); }
.ex-cascade-deckbtn:hover .ex-cascade-deck i { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-cascade-level.is-collapsed .ex-cascade-pill.is-active { position: relative; z-index: 2; }
.ex-cascade-sep { flex: 0 0 auto; color: var(--ex-muted); font-weight: 700; }

/* Group folders: the +/- circle folds/unfolds the cards; the title itself
   doesn't filter anything - clicking it just makes that group "active" for
   the map's zoom/fade option (see .ex-section-head.is-active-group). */
.ex-section-head { user-select: none; }
.ex-section-title { cursor: pointer; }
.ex-section-title:hover { filter: brightness(1.08); }
.ex-section-caret { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ex-accent); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; transform: rotate(-90deg); transition: transform .15s ease, color .12s ease; }
.ex-section-caret:hover { color: var(--ex-ink); }
.ex-section-head.is-collapsed .ex-section-caret { transform: rotate(0deg); }
.ex-section-caret:focus-visible { outline: 3px solid #83b9dc; outline-offset: 2px; }
/* Active group: a light ring on the title shows which group is currently
   driving the map (from scroll-spy or a direct tap on its title). */
.ex-section-head.is-active-group .ex-section-title { box-shadow: 0 0 0 2px var(--ex-accent); background: var(--ex-accent-soft); }

/* Empty + load more ------------------------------------------------------- */
.ex-empty { padding: 28px; border: 1px dashed #ccd4cf; border-radius: 10px; background: #fff; color: var(--ex-muted); text-align: center; }
.ex-empty-note { padding: 14px 16px; margin: 0 0 12px; border: 1px dashed var(--ex-line); border-radius: 10px; background: #fff; color: var(--ex-muted); font-size: 13px; }
.ex-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.ex-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; color: var(--ex-ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.ex-more:hover { border-color: var(--ex-accent); color: var(--ex-accent); }

/* Focus ------------------------------------------------------------------- */
.ex-card:focus-visible, .ex-pill:focus-visible, .ex-chip:focus-visible,
.ex-more:focus-visible, .ex-reset:focus-visible, .ex-active-chip:focus-visible,
.ex-search:focus-visible, .ex-view-btn:focus-visible { outline: 3px solid #83b9dc; outline-offset: 2px; }

/* Drawer context ---------------------------------------------------------- */
.where-rail-drawer .ex-panel { border: 0; padding: 0; }
.where-rail-drawer .ex-loc-tree { max-height: none; }
.where-rail-drawer .ex-chips { max-height: none; }

/* Container queries ------------------------------------------------------- */
/* (The old 940px grid override is gone - the size stepper's auto-fill
   columns now handle every width.) */

@container (max-width: 700px) {
	.ex-topbar-row { grid-template-columns: 1fr; justify-items: start; gap: 8px; }
	.ex-topbar-left, .ex-topbar-types, .ex-topbar-controls { justify-self: start; justify-content: flex-start; }
	.ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--ex-grid-gap, 12px) * .75); }
	.ex-card-mode .ex-grid { grid-template-columns: 1fr; }
	.ex-card-mode .ex-card { min-height: 110px; }
	.ex-card-mode .ex-card::before { width: 110px; }
	.ex-card-mode .ex-card-overlay { margin-left: 110px; padding: 11px 14px; }
}

@container (max-width: 440px) {
	.ex-widget { --ex-gutter: 16px; border-radius: 12px; }
	.ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ex-card-title { font-size: 12px; }
	.ex-card-overlay { padding: 10px; }
	.ex-card-loc { font-size: 9px; padding: 3px 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.ex-card { transition: none; }
	.ex-loc-caret::before { transition: none; }
}

/* Map (Leaflet) ----------------------------------------------------------- */
/* v0.25.0: the outer map shell no longer clips - Leaflet mounts on the
   inner div below, which does the clipping. That lets the resize pill
   straddle the map's border line. */
.ex-map { position: relative; border: 1px solid var(--ex-line); border-radius: 12px; background: #e9ece9; height: 420px; min-height: 140px; overflow: visible; z-index: 4; }
.ex-map-inner { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #e9ece9; z-index: 1; }
/* Top sticks just under the stuck submenu; bottom pins to the viewport
   bottom. Both default to 25% of the viewport; the drag handle overrides
   height. v0.15.1: the sticky top now includes the theme menu offset
   (like the submenu itself) so the map controls never hide behind it. */
/* v0.25.0: the top map hugs the submenu - no gap in flow (the -14px eats
   the submenu's margin) and none while stuck. */
.ex-map-top { position: sticky; top: calc(var(--where-sticky-offset, 132px) + var(--ex-tools-h, 64px)); height: 25vh; margin: -14px 0 12px; }
.ex-map-bottom { position: sticky; bottom: 10px; height: 25vh; margin: 12px 0 0; }
/* Side sticks under the submenu and runs to the bottom of the viewport.
   --ex-map-w is set by the drag handle to resize the column width. */
.ex-body-side { display: grid; grid-template-columns: minmax(0, 1fr) var(--ex-map-w, minmax(280px, 38%)); gap: 14px; align-items: start; }
/* v0.25.0: the side map hugs the submenu too - same no-gap treatment. */
.ex-body-side .ex-map { position: sticky; top: calc(var(--where-sticky-offset, 132px) + var(--ex-tools-h, 64px)); margin-top: -14px; height: calc(100vh - var(--where-sticky-offset, 132px) - var(--ex-tools-h, 64px) - 12px); }
@media (max-width: 900px) {
	.ex-body-side { grid-template-columns: 1fr; }
	.ex-body-side .ex-map { position: static; order: -1; height: 260px; }
}

/* Drag-to-resize handle on the map's inner edge. */
/* v0.25.0: square pill (5px corners, 8 dots, no hover recolor) centered ON
   the map's border line - half over the map, half over the gap. */
.ex-map-handle { position: absolute; z-index: 1200; touch-action: none; }
/* v0.29.5: same pill size, tighter 5px dot pitch clipped to a centered
   content box - still 8 dots. */
.ex-map-handle::after { content: ''; position: absolute; box-sizing: border-box; background-color: #fff; border: 1px solid var(--ex-line); border-radius: 5px; box-shadow: 0 2px 8px rgba(15, 22, 18, .25); background-image: radial-gradient(circle, #6b7570 1.2px, transparent 1.45px), linear-gradient(#fff, #fff); background-repeat: repeat, no-repeat; background-clip: content-box, border-box; }
.ex-map-handle-left { left: -8px; top: 0; bottom: 0; width: 16px; cursor: ew-resize; }
.ex-map-handle-left::after { left: 0; top: 50%; width: 16px; height: 32px; transform: translateY(-50%); padding: 6px 3px; background-size: 5px 5px, auto; background-position: 0 0, 0 0; }
.ex-map-handle-bottom { left: 0; right: 0; bottom: -8px; height: 16px; cursor: ns-resize; }
.ex-map-handle-bottom::after { bottom: 0; left: 50%; width: 32px; height: 16px; transform: translateX(-50%); padding: 3px 6px; background-size: 5px 5px, auto; background-position: 0 0, 0 0; }
.ex-map-handle-top { left: 0; right: 0; top: -8px; height: 16px; cursor: ns-resize; }
.ex-map-handle-top::after { top: 0; left: 50%; width: 32px; height: 16px; transform: translateX(-50%); padding: 3px 6px; background-size: 5px 5px, auto; background-position: 0 0, 0 0; }

/* Fade-in pin tooltips (thumb + name). */
.ex-map-tip { padding: 5px 9px; border: 1px solid var(--ex-line); border-radius: 10px; box-shadow: 0 6px 18px rgba(25, 35, 30, .16); animation: ex-tip-in .22s ease both; }
.ex-tip { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: inherit; text-decoration: none; cursor: pointer; }
.ex-tip-thumb { display: block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background-size: cover; background-position: center; }
/* v0.17.0: the bubble mirrors the opposite view - grid view keeps this
   list-style row, card view flips it into a mini grid tile. */
.ex-card-mode .ex-tip { flex-direction: column; align-items: stretch; width: 150px; }
.ex-card-mode .ex-tip .ex-tip-thumb { width: 100%; height: 84px; }
/* v0.18.0: long titles clamp to two lines instead of running off the
   bubble. */
.ex-tip { max-width: 230px; }
.ex-tip > span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* v0.18.0: aggregated place tooltip - place name on top (plain text), then
   up to three posts that visit this spot, then a "+N more" line. The inner
   rows reuse .ex-tip but stay compact rows in both views. */
.ex-tip-place { display: flex; flex-direction: column; gap: 6px; max-width: 240px; }
.ex-tip-place-name { display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.ex-tip-place .ex-tip, .ex-card-mode .ex-tip-place .ex-tip { flex-direction: row; align-items: center; width: auto; }
.ex-tip-place .ex-tip .ex-tip-thumb, .ex-card-mode .ex-tip-place .ex-tip .ex-tip-thumb { width: 34px; height: 34px; }
.ex-tip-more { font-size: 11px; font-weight: 700; color: #777; }
/* PNG pin markers: the inner img scales on hover so Leaflet's positioning
   transform on the outer node is never disturbed. */
.ex-pin { background: none; border: 0; }
.ex-pin img { display: block; width: 100%; height: 100%; max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; transition: transform .16s ease; transform-origin: 50% 92%; filter: drop-shadow(0 2px 3px rgba(15, 22, 18, .35)); }
.ex-pin:hover img { transform: scale(1.18); }
/* Card/list hover: the pin jumps to the front and grows harder than a
   plain map hover. */
.ex-pin.is-hover { z-index: 10000 !important; }
.ex-pin.is-hover img { transform: scale(1.34); }

/* v0.21.0: map dots as divIcon markers - they hold a constant pixel size
   through zoom animations (vector circles scale with the map, then snap). */
.ex-dot-icon { background: transparent; border: 0; }
/* v0.29.7: subtle spherical shading - a soft highlight upper-left and a
   faint shade lower-right layered over whatever color the dot carries
   inline. Percentage-based so it scales with every dot size, plus a light
   drop shadow to lift the dot off the tiles. */
/* v0.29.8: --ex-dot-scale is set on the map element per zoom level so dots
   shrink at wide views and grow back as you zoom in. */
.ex-dot { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; transition: transform .12s ease; box-shadow: 0 1px 2px rgba(15, 22, 18, .3); transform: scale(var(--ex-dot-scale, 1)); }
.ex-dot::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 48%), radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 58%); pointer-events: none; }
.ex-dot-icon.is-hover { z-index: 10000 !important; }
.ex-dot-icon.is-hover .ex-dot { transform: scale(calc(var(--ex-dot-scale, 1) * 1.3)); }
/* v0.29.4: Clear pill top-left of the map (zoom buttons live top-right) -
   disengages the active post and re-fits the map to the current filter. */
.ex-map-clear { position: absolute; top: 10px; left: 10px; z-index: 1100; padding: 4px 12px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 999px; background: rgba(255, 255, 255, .95); color: #262827; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.ex-map-clear:hover { background: #ffffff; }
/* v0.30.0: WHERE Grid compact mode - hides the Explore shell chrome (filter
   sidebar, topbar, sticky count) when the Grid widget runs with its filter
   shell off. The card grid itself is untouched. */
.ex-grid-mini .ex-sidebar, .ex-grid-mini .ex-topbar, .ex-grid-mini .ex-count { display: none; }
.ex-grid-mini .ex-layout { display: block; }
/* v0.24.0: free 256px raster tiles get a half-pixel overlap so zoom rounding
   can never open a white hairline between tiles (Mapbox 512px tiles never
   seam and skip this). */
.ex-tiles-256 .leaflet-tile { width: 256.5px !important; height: 256.5px !important; }
/* Fade only - Leaflet positions tooltips with an inline transform, so
   animating transform here would fling them to the map's corner. */
@keyframes ex-tip-in { from { opacity: 0; } to { opacity: 1; } }

/* Pin-click spotlight: scroll the card to center, fade the rest. */
.ex-spotlight .ex-card { transition: transform .16s ease, box-shadow .35s ease, opacity .35s ease; opacity: .22; }
.ex-spotlight .ex-card.is-spotlit { opacity: 1; box-shadow: 0 0 0 3px var(--ex-accent, #2c6e49), 0 8px 22px rgba(25, 35, 30, .25); }

/* Visitor map-position button (cycles off / side / top / bottom). */
/* Icon-only tool buttons (view options, map) sized to match the sortbox. */
.ex-tool-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; color: var(--ex-ink); line-height: 1; }
.ex-tool-btn:hover { border-color: var(--ex-accent, #2c6e49); }
.ex-map-btn.is-active { background: var(--ex-accent, #2c6e49); border-color: var(--ex-accent, #2c6e49); color: var(--ex-accent-ink, #fff); }
.ex-tool-btn svg { display: block; width: 22px; height: 22px; }

/* Collapsible sidebar facets. */
.ex-facet-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.ex-facet-toggle:hover .ex-facet-label { color: var(--ex-accent); }
.ex-facet-caret { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; border: 1px solid var(--ex-line); border-radius: 50%; background: #fff; }
.ex-facet-caret::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--ex-muted); border-bottom: 2px solid var(--ex-muted); transform: rotate(45deg); transition: transform .15s ease; }
.ex-facet.is-collapsed .ex-facet-caret::before { margin-top: 2px; transform: rotate(-45deg); }
.ex-facet-body { display: flex; flex-direction: column; gap: 9px; }
.ex-facet.is-collapsed .ex-facet-body { display: none; }
/* v0.26.0: long type lists scroll inside the facet instead of running the
   sidebar (and the screen) out of room. */
.ex-facet[data-ex-facet="type"] .ex-facet-body { max-height: min(340px, 42vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }

/* Locations multi-select switch. */
.ex-multi-toggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 30px; padding: 4px 11px 4px 5px; border: 1px solid var(--ex-line); border-radius: 999px; background: #fff; color: var(--ex-muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.ex-multi-knob { position: relative; display: block; width: 26px; height: 16px; border-radius: 999px; background: #d7dcd8; transition: background .15s ease; }
.ex-multi-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.ex-multi-toggle.is-on { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-multi-toggle.is-on .ex-multi-knob { background: var(--ex-accent); }
.ex-multi-toggle.is-on .ex-multi-knob::after { left: 12px; }
/* Multi-select on: the breadcrumb rail can't express multiple picks. */
.ex-cascade.is-disabled { opacity: .45; pointer-events: none; }

/* Close (<) for a cascade level fanned open from its deck. */
.ex-cascade-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 1px solid var(--ex-line); border-radius: 50%; background: #fff; color: var(--ex-muted); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.ex-cascade-close:hover { border-color: var(--ex-accent); color: var(--ex-accent); }

/* Centered type pills in the topbar (counts hidden; selected = #333). */
.ex-topbar-types { justify-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.ex-topbar-types .ex-pill { min-height: 30px; padding: 5px 11px; font-size: 11px; }
.ex-topbar-types .ex-pill-count { display: none; }

/* Sort: asc/desc toggle + dropdown share one segmented control. */
.ex-sortbox { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; }
.ex-sortbox .ex-sort-dir { min-width: 30px; min-height: 30px; border: 0; border-radius: 6px; }
.ex-sortbox .ex-dd-btn { min-height: 30px; padding: 5px 10px; border: 0; border-radius: 6px; }
.ex-sortbox .ex-sort-dir:hover, .ex-sortbox .ex-dd-btn:hover { background: #f0f2f0; }

/* View options menu: grouping, layout and size in one panel. */
.ex-view-menu { min-width: 225px; }
.ex-vm-label { display: block; margin: 8px 4px 3px; color: var(--ex-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ex-vm-label:first-child { margin-top: 2px; }
.ex-vm-row { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }

/* --- v0.10.25: folded topbar type filter + lazy-load fade-in ------------- */
.ex-types-toggle { display: inline-flex; align-items: center; gap: 7px; }
.ex-types-toggle .ex-dd-caret { border-color: currentColor; opacity: .55; }
.ex-types-toggle.is-on { background: #333333; border-color: #333333; color: #fff; }
.ex-topbar-types.is-collapsed .ex-pill:not(.ex-types-toggle) { display: none; }
/* v0.26.0: the expanded topbar type row caps at ~3 pill rows and scrolls. */
.ex-topbar-types:not(.is-collapsed) { max-height: 128px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ex-topbar-types:not(.is-collapsed) .ex-types-toggle .ex-dd-caret { margin-top: 3px; transform: rotate(-135deg); }
/* v0.29.3: pills mode - every option stays out; no fold, no scroll cap. */
.ex-topbar-types.ex-types-open { max-height: none; overflow: visible; }
.ex-card.ex-enter { animation: ex-card-in .5s ease both; }
@keyframes ex-card-in { from { opacity: 0; } to { opacity: 1; } }

/* ========================================================================
   v0.10.26: right sidebar, sidebar-aware side map, panel card styles
   ======================================================================== */

/* Sidebar on the right: mirror the layout columns; the side map (below)
   then moves to the left so it always hugs the results, opposite the bar. */
.ex-widget.ex-side-right .ex-layout { grid-template-columns: minmax(0, 1fr) var(--ex-sb-w, 260px); }
.ex-widget.ex-side-right .ex-sidebar { order: 2; }
.ex-widget.ex-side-right .ex-body-side { grid-template-columns: var(--ex-map-w, minmax(280px, 38%)) minmax(0, 1fr); }
.ex-widget.ex-side-right .ex-body-side .ex-map { order: -1; }
@media (max-width: 900px) {
	.ex-widget.ex-side-right .ex-body-side { grid-template-columns: 1fr; }
	.ex-widget.ex-side-right .ex-body-side .ex-map { position: static; order: -1; height: 260px; }
}

/* Panel card styles (Journal / Trip / Venture): image window up top, dark
   info panel below. The photo remains the <a> background; the opaque
   panel simply covers its lower half. */
.ex-style-journal .ex-card,
.ex-style-trip .ex-card,
.ex-style-venture .ex-card,
.ex-style-article .ex-card {
	aspect-ratio: auto;
	justify-content: flex-start;
	background-color: #262827;
}
.ex-card-media { position: relative; display: block; aspect-ratio: var(--ex-thumb-ratio, 4 / 3); flex: 0 0 auto; }
/* v0.19.1: journal cards read as portrait like the original Experiences
   design - taller photo window instead of the squareish 4:3. */
/* v0.25.0: journal default back to the square 1:1 photo window. */
.ex-style-journal .ex-card-media { aspect-ratio: var(--ex-thumb-ratio, 1 / 1); }
/* v0.20.0: per-design thumb ratios - trips widescreen, articles 4:3. */
.ex-style-trip .ex-card-media { aspect-ratio: var(--ex-thumb-ratio, 16 / 9); }
.ex-style-article .ex-card-media { aspect-ratio: var(--ex-thumb-ratio, 4 / 3); }
/* v0.20.0: article design - light text box on TOP of the thumb. */
.ex-style-article .ex-card { flex-direction: column-reverse; justify-content: flex-end; }
.ex-style-article .ex-card-panel { background: #fff; color: #262827; }
.ex-style-article .ex-card-title { color: #262827; }
.ex-style-article .ex-card-date { color: #6b6f6c; }
.ex-style-article .ex-card-tbadge { top: auto; bottom: 0; transform: translateY(50%); }
.ex-card-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	flex: 1 1 auto;
	/* v0.20.0: roomier text box so copy breathes away from the edges. */
	padding: 18px 20px 20px;
	background: #262827;
	color: #fff;
}
/* v0.20.0: journal centering now follows the alignment controls. */
.ex-card-flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--ex-accent);
	color: var(--ex-accent-ink, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}
.ex-card-flag-corner { top: auto; left: auto; right: 10px; bottom: 10px; background: #fff; color: #262827; }
.ex-card-tags { position: absolute; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: calc(100% - 20px); }
.ex-card-tags i { font-style: normal; padding: 3px 8px; border-radius: 3px; background: #fff; color: #262827; font-size: 10px; font-weight: 600; }
.ex-card-date { color: rgba(255, 255, 255, .72); font-size: 11.5px; font-weight: 500; }
.ex-card-btn {
	display: inline-block;
	margin-top: 7px;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--ex-accent);
	color: var(--ex-accent-ink, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.ex-card:hover .ex-card-btn { filter: brightness(1.1); }
/* v0.18.0: places visited replace the always-on View button - badge-style
   chips in grey below the date, hard-capped at two rows. */
.ex-card-places { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; max-height: 46px; overflow: hidden; }
.ex-card-places i { font-style: normal; padding: 3px 8px; border-radius: 3px; background: #777; color: #fff; font-size: 10px; font-weight: 600; line-height: 1.5; }
.ex-card-places i.ex-card-places-more { background: #5c5c5c; }
/* v0.18.0: list view badge copy - hidden in grid mode, shown inside the
   text panel in card (list) mode. */
.ex-card-ptags { display: none; }
/* v0.19.0: per-term tint - the type badge takes the term accent, with ink
   flipping dark on light colors like pastel pink. */
.ex-card.ex-has-tint .ex-card-flag { background: var(--ex-item-accent); color: var(--ex-item-ink, #fff); }
.ex-card.ex-has-tint .ex-card-media .ex-card-tags i { background: var(--ex-item-accent); color: var(--ex-item-ink, #fff); }
.ex-card-mode .ex-card.ex-has-tint .ex-card-ptags i { background: var(--ex-item-accent); color: var(--ex-item-ink, #fff); }
/* v0.19.0: feature tag chips on journal cards - max 3, under the location
   chip. */
.ex-card-feats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ex-card-feats i { font-style: normal; padding: 3px 8px; border-radius: 3px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 10px; font-weight: 600; }

/* v0.20.0: unified panel card kit - CPT badge on the thumb, seam type
   badge, one-row place chips (#555, pin icon) + one-row tag chips (#444)
   with a +N overflow chip, all with left/center/right alignment. */
.ex-card-cptb { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: 3px; background: rgba(38, 40, 39, .82); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ex-cptb-center .ex-card-cptb { left: 50%; transform: translateX(-50%); }
.ex-cptb-right .ex-card-cptb { left: auto; right: 10px; }
/* v0.24.0: the type badge defaults to white and every color is overridable
   from the widget (--ex-tbadge-bg / --ex-tbadge-ink). A soft shadow keeps
   the white badge legible over light photos and panels. */
.ex-card-tbadge { position: absolute; top: 0; left: 20px; transform: translateY(-50%); z-index: 2; padding: 4px 10px; border-radius: 4px; background: var(--ex-tbadge-bg, #ffffff); color: var(--ex-tbadge-ink, #262827); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 1px 6px rgba(0, 0, 0, .22); }
/* v0.29.9: per-CPT / per-term badge icons - inherit the badge ink color. */
.ex-card-cptb .ex-badge-ic, .ex-card-tbadge .ex-badge-ic { vertical-align: -2px; margin-right: 4px; }
.ex-tb-center .ex-card-tbadge { left: 50%; transform: translate(-50%, -50%); }
.ex-tb-right .ex-card-tbadge { left: auto; right: 20px; transform: translateY(-50%); }
/* v0.24.0: tinted (per-term) cards keep the white default too - the term
   color still drives dots and focus pins; set the badge overrides to bring
   the tint back onto the badge. */
/* v0.29.2: tinted cards take the per-term accent on the type badge; the
   widget-level badge colors stay as the fallback for untinted cards. */
.ex-card.ex-has-tint .ex-card-tbadge { background: var(--ex-item-accent, var(--ex-tbadge-bg, #ffffff)); color: var(--ex-item-ink, var(--ex-tbadge-ink, #262827)); }
.ex-tx-center .ex-card-title, .ex-tx-center .ex-card-date { align-self: center; text-align: center; }
.ex-tx-right .ex-card-title, .ex-tx-right .ex-card-date { align-self: flex-end; text-align: right; }
.ex-card-pchips, .ex-card-tchips { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; width: 100%; justify-content: flex-start; margin-top: 2px; }
.ex-ch-center .ex-card-pchips, .ex-ch-center .ex-card-tchips { justify-content: center; }
.ex-ch-right .ex-card-pchips, .ex-ch-right .ex-card-tchips { justify-content: flex-end; }
.ex-card-pchips i, .ex-card-tchips i { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-style: normal; padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; }
/* v0.24.0: chip colors are overridable from the widget; the place-chip pin
   icon runs golden yellow by default and slightly larger. */
.ex-card-pchips i { background: var(--ex-pchip-bg, #555555); color: var(--ex-pchip-ink, #fff); }
.ex-card-tchips i { background: var(--ex-tchip-bg, #444444); color: var(--ex-tchip-ink, #fff); }
.ex-chip-pin { flex: 0 0 auto; color: var(--ex-chip-pin, #f5c518); opacity: 1; }
/* On the location badge the pin inherits the badge ink so it can never
   vanish into a same-colored background; the widget override still wins. */
.ex-card-loc .ex-chip-pin { color: var(--ex-chip-pin, currentColor); }
/* List view: the seam type badge rides the vertical seam between the photo
   column and the text panel. */
.ex-card-mode .ex-card-tbadge { top: 16px; left: 0; right: auto; transform: translateX(-50%); }
.ex-tb-center.ex-card-mode .ex-card-tbadge, .ex-tb-right.ex-card-mode .ex-card-tbadge { top: 16px; left: 0; right: auto; transform: translateX(-50%); }
.ex-style-article.ex-card-mode .ex-card-tbadge { top: 16px; bottom: auto; }
/* Clicked (stuck) map tooltips stay clickable. */
.ex-tip-stuck { pointer-events: auto; }
.ex-style-journal .ex-card-loc,
.ex-style-trip .ex-card-loc,
.ex-style-venture .ex-card-loc { background: var(--ex-loc-bg, rgba(255, 255, 255, .14)); color: var(--ex-loc-ink, #fff); margin-bottom: 0; }

/* Panel styles in List view: real horizontal rows - photo square on the
   left, dark panel filling the rest. */
.ex-style-journal.ex-card-mode .ex-card,
.ex-style-trip.ex-card-mode .ex-card,
.ex-style-venture.ex-card-mode .ex-card,
.ex-style-article.ex-card-mode .ex-card {
	flex-direction: row;
	min-height: 140px;
	background-color: #262827;
	border: 0;
}
.ex-style-article.ex-card-mode .ex-card { background-color: #fff; border: 1px solid var(--ex-line); }
/* v0.20.0: journal list rows run taller so each card keeps presence. */
.ex-style-journal.ex-card-mode .ex-card { min-height: 185px; }
.ex-style-journal.ex-card-mode .ex-card::before,
.ex-style-trip.ex-card-mode .ex-card::before,
.ex-style-venture.ex-card-mode .ex-card::before,
.ex-style-article.ex-card-mode .ex-card::before { content: none; }
/* v0.20.0: list thumbs keep each design's ratio - the photo column sizes
   itself from the row height instead of a fixed 140px square. */
.ex-style-journal.ex-card-mode .ex-card-media { width: auto; flex: 0 0 auto; align-self: stretch; aspect-ratio: var(--ex-thumb-ratio, 1 / 1); }
.ex-style-trip.ex-card-mode .ex-card-media { width: auto; flex: 0 0 auto; align-self: stretch; aspect-ratio: var(--ex-thumb-ratio, 16 / 9); }
.ex-style-venture.ex-card-mode .ex-card-media,
.ex-style-article.ex-card-mode .ex-card-media { width: auto; flex: 0 0 auto; align-self: stretch; aspect-ratio: var(--ex-thumb-ratio, 4 / 3); }
.ex-style-journal.ex-card-mode .ex-card-panel,
.ex-style-trip.ex-card-mode .ex-card-panel,
.ex-style-venture.ex-card-mode .ex-card-panel,
.ex-style-article.ex-card-mode .ex-card-panel { justify-content: center; }
/* v0.20.0: list view titles on dark panels stay light - the generic list
   rule painted them ink-on-dark (invisible). */
.ex-style-journal.ex-card-mode .ex-card-title,
.ex-style-trip.ex-card-mode .ex-card-title,
.ex-style-venture.ex-card-mode .ex-card-title { color: #fff; }

/* ========================================================================
   v0.10.27: collapsible sidebar, sidebar styles, sticky title, seam badges
   ======================================================================== */

/* Headline: CPT-accent underline (accent is set per widget in Elementor). */
.ex-heading { display: inline-block; padding-bottom: 5px; border-bottom: 4px solid var(--ex-accent); }

/* The title block lives inside the sidebar panel now, so the submenu pins
   directly below the main menu and never overlays the cards. */
.ex-panel .ex-head { margin: 0; padding-bottom: 2px; }
.ex-panel .ex-heading { font-size: 21px; }
.ex-panel .ex-copy { margin: 8px 0 0; font-size: 12.5px; }

/* Filter hide/show tab: ONE eye tab that hangs underneath the sidebar's
   bottom-right corner. Hiding folds the panel up from the bottom into an
   eyebrow+title strip; the submenu and the grid never move. Only the
   icon swaps between crossed (hide) and open (show). */
.ex-sidebar { z-index: 31; }
/* v0.13.0: while the sidebar is open the tab pokes out of its right edge
   near the bottom; when the panel folds up it slides to hang underneath
   the collapsed strip's bottom-right (its previous spot). */
.ex-sb-tab { position: absolute; bottom: 12px; left: 100%; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 38px; padding: 0; border: 1px solid var(--ex-line); border-left: 0; border-radius: 0 9px 9px 0; background: #fff; color: var(--ex-muted); cursor: pointer; box-shadow: 4px 3px 12px rgba(15, 22, 18, .08); transition: color .12s ease, background .12s ease; }
.ex-widget.ex-side-right .ex-sb-tab { left: auto; right: 100%; border-left: 1px solid var(--ex-line); border-right: 0; border-radius: 9px 0 0 9px; box-shadow: -4px 3px 12px rgba(15, 22, 18, .08); }
.ex-sb-tab:hover { color: var(--ex-ink); background: var(--ex-accent-soft); }
.ex-sb-tab .ex-sb-eye-show { display: none; }
/* Collapsed: the tab slides to hang underneath the strip's bottom-right. */
.ex-sb-collapsed .ex-sb-tab { bottom: auto; top: 100%; left: auto; right: 14px; width: 38px; height: 30px; border: 1px solid var(--ex-line); border-top: 0; border-radius: 0 0 9px 9px; box-shadow: 0 4px 12px rgba(15, 22, 18, .08); }
.ex-widget.ex-side-right.ex-sb-collapsed .ex-sb-tab { left: auto; right: 14px; }
.ex-sb-collapsed .ex-sb-tab .ex-sb-eye { display: none; }
.ex-sb-collapsed .ex-sb-tab .ex-sb-eye-show { display: block; }
/* Hidden state: the panel folds up from the bottom into a strip that keeps
   the eyebrow + title stacked exactly as when open (one column, two lines).
   The submenu stays visually in place (margined right by the strip width)
   and the item grid takes the full width below it. */
.ex-sb-collapsed .ex-panel { height: auto; min-height: var(--ex-tools-h, 54px); max-height: none; padding: 10px 16px; overflow: hidden; animation: exSbFold .28s ease; }
@keyframes exSbFold { from { max-height: 420px; opacity: .85; } to { max-height: 96px; opacity: 1; } }
.ex-sb-collapsed .ex-panel > *:not(.ex-head) { display: none; }
.ex-sb-collapsed .ex-panel .ex-head { display: block; margin: 0; padding: 0; overflow: hidden; }
.ex-sb-collapsed .ex-eyebrow { margin: 0 0 4px; }
.ex-sb-collapsed .ex-copy { display: none; }
.ex-sb-collapsed .ex-main { grid-column: 1 / -1; grid-row: 1; }
.ex-sb-collapsed .ex-sidebar { grid-column: 1; grid-row: 1; align-self: start; }
.ex-sb-collapsed .ex-topbar { margin-left: 272px; }
.ex-widget.ex-side-right.ex-sb-collapsed .ex-sidebar { grid-column: 2; }
.ex-widget.ex-side-right.ex-sb-collapsed .ex-topbar { margin-left: 0; margin-right: 272px; }

/* Sidebar style 1: white with the accent outline. */
.ex-sb-outline .ex-panel { background: #fff; border: 2px solid var(--ex-accent); }
.ex-sb-outline .ex-facet-label { color: var(--ex-accent); }

/* Sidebar style 2: filled with the accent color; text flips to light. */
.ex-sb-fill .ex-panel { background: var(--ex-accent); border-color: transparent; }
.ex-sb-fill .ex-panel, .ex-sb-fill .ex-panel * { color: #fff; }
.ex-sb-fill .ex-search { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.ex-sb-fill .ex-search::placeholder { color: rgba(255, 255, 255, .72); }
.ex-sb-fill .ex-search:focus { border-color: #fff; }
.ex-sb-fill .ex-panel .ex-pill,
.ex-sb-fill .ex-panel .ex-chip,
.ex-sb-fill .ex-panel .ex-reset,
.ex-sb-fill .ex-panel .ex-multi-toggle,
.ex-sb-fill .ex-panel .ex-active-chip { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .4); }
.ex-sb-fill .ex-panel .ex-pill:hover,
.ex-sb-fill .ex-panel .ex-chip:hover,
.ex-sb-fill .ex-panel .ex-reset:hover { border-color: #fff; }
.ex-sb-fill .ex-panel .ex-pill.is-active { background: #fff; border-color: #fff; }
.ex-sb-fill .ex-panel .ex-pill.is-active, .ex-sb-fill .ex-panel .ex-pill.is-active * { color: var(--ex-accent); }
.ex-sb-fill .ex-panel .ex-chip:has(input:checked) { background: rgba(255, 255, 255, .32); border-color: #fff; }
.ex-sb-fill .ex-panel .ex-chip input { accent-color: #fff; }
.ex-sb-fill .ex-facet-caret { border-right-color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .85); }
.ex-sb-fill .ex-panel .ex-chip-count { color: rgba(255, 255, 255, .78); }

/* Sidebar style 3: accent details only. */
.ex-sb-accent .ex-panel { border-top: 3px solid var(--ex-accent); }
.ex-sb-accent .ex-facet-label { color: var(--ex-accent); }
.ex-sb-accent .ex-facet-caret { border-right-color: var(--ex-accent); border-bottom-color: var(--ex-accent); }
.ex-sb-accent .ex-panel .ex-pill.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-sb-accent .ex-panel .ex-chip:has(input:checked) { background: var(--ex-accent); border-color: var(--ex-accent); }
.ex-sb-accent .ex-panel .ex-reset:hover { border-color: var(--ex-accent); color: var(--ex-accent); }

/* Universal seam badges: corner badges and tag stacks sit half over the
   photo, half over the info panel (the gear-card look). */
.ex-card-flag-corner { bottom: 0; transform: translateY(50%); z-index: 2; }
.ex-card-tags { bottom: 0; transform: translateY(50%); z-index: 2; }

/* Calendar icon (replaces the emoji): inherits the date's color. */
.ex-card-date { display: inline-flex; align-items: center; gap: 5px; }
.ex-card-cal { flex: 0 0 auto; opacity: .8; }

/* ========================================================================
   v0.10.28: centered thumbs, sidebar texture, list-view seam badges
   ======================================================================== */

/* Centered thumbnails: panel styles paint the photo on the media box
   itself (cover, centered) instead of stretching it behind the whole
   card, which showed an off-center crop. */
.ex-style-journal .ex-card,
.ex-style-trip .ex-card,
.ex-style-venture .ex-card,
.ex-style-article .ex-card { background-size: 0 0; background-repeat: no-repeat; }
.ex-card-media { background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #3a3c39; }

/* Sidebar texture: the topo image washes over the panel at 10% opacity,
   under the controls, on top of whatever the Sidebar Style paints. */
.ex-sb-hastex .ex-panel { position: relative; isolation: isolate; overflow: hidden; }
.ex-sb-hastex .ex-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--ex-sb-tex);
	background-size: cover;
	background-position: center;
	opacity: .1;
	pointer-events: none;
}

/* Seam badges in List view: rows are horizontal, so badges straddle the
   vertical seam between the photo square and the panel. */
/* v0.18.0: list view - badges leave the photo entirely; the panel copy
   (.ex-card-ptags) carries the label inside the text box instead. */
.ex-card-mode .ex-card-media .ex-card-flag,
.ex-card-mode .ex-card-media .ex-card-tags { display: none; }
.ex-card-mode .ex-card-ptags { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-card-mode .ex-card-ptags i { font-style: normal; padding: 3px 8px; border-radius: 3px; background: #fff; color: #262827; font-size: 10px; font-weight: 600; }
/* v0.18.0: no more seam badges in list view, so the panel keeps its normal
   padding instead of clearing space for them. */
.ex-style-trip.ex-card-mode .ex-card-panel,
.ex-style-venture.ex-card-mode .ex-card-panel { padding-left: 16px; }

/* --- v0.10.31: dark color scheme ------------------------------------------ */
.ex-widget.ex-dark {
	--ex-ink: #e9ebe9;
	--ex-muted: #a7aca8;
	--ex-line: #3b3e3c;
	--ex-shell: #1d1f1e;
	--ex-shell-2: #242625;
	--ex-accent-soft: #223038;
}
.ex-widget.ex-dark:not(.ex-sb-fill) .ex-panel { background: #232524; }
.ex-dark .ex-search { background: #1a1c1b; border-color: var(--ex-line); }
.ex-dark .ex-pill,
.ex-dark .ex-chip,
.ex-dark .ex-reset,
.ex-dark .ex-group-jump,
.ex-dark .ex-sort-dir,
.ex-dark .ex-dd-btn,
.ex-dark .ex-dd-menu,
.ex-dark .ex-view-switch,
.ex-dark .ex-cols,
.ex-dark .ex-sortbox,
.ex-dark .ex-more,
.ex-dark .ex-tool-btn,
.ex-dark .ex-multi-toggle,
.ex-dark .ex-cascade-pill,
.ex-dark .ex-cascade-globe,
.ex-dark .ex-cascade-close,
.ex-dark .ex-cascade-plus,
.ex-dark .ex-cascade-deck i { background: #2c2f2d; border-color: var(--ex-line); color: var(--ex-ink); }
.ex-dark .ex-pill { color: #ced2cf; }
.ex-dark .ex-pill.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-dark .ex-cascade-pill.is-active,
.ex-dark .ex-cascade-globe.is-active { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-dark .ex-view-btn.is-active { background: #3b3e3c; color: var(--ex-ink); }
.ex-dark .ex-dd-opt { color: var(--ex-ink); }
.ex-dark .ex-dd-opt:hover { background: #353836; }
.ex-dark .ex-count { background: rgba(29, 31, 30, .93); }
.ex-dark .ex-empty,
.ex-dark .ex-empty-note { background: #232524; }
.ex-dark .ex-sb-tab { background: #232524; }
.ex-dark .ex-sb-tab:hover { background: #2c2f2d; }
.ex-dark .ex-map { background: #232524; }

/* v0.10.33: mobile overhaul + map polish ---------------------------------- */

/* Leaflet tile seams: hairline grid lines appear when tiles get scaled a
   fraction of a pixel; theme img max-width rules are neutralised so tiles
   never shrink. */
.ex-map .leaflet-tile-container img,
.ex-map img.leaflet-tile { max-width: none !important; max-height: none !important; }
/* White seam grid fix: strip theme img styling - a border, padding, or
   white background applied to every img by the theme paints a white grid
   over the tiles - and for 256px raster sources keep a 1px oversize so
   neighbours overlap. Mapbox serves 512px tiles at their native size, so
   it skips the oversize. */
.ex-map img.leaflet-tile,
.ex-map .leaflet-tile-container img { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; outline: 0 !important; }
.ex-widget:not(.ex-mapbox) .ex-map img.leaflet-tile { width: 257px !important; height: 257px !important; }
/* Mapbox's 512px tiles get the same 1px oversize: at fractional zooms the
   scaled tile edges can hairline into a grid, overlapping neighbours by a
   pixel hides the seams for good. */
.ex-mapbox .ex-map img.leaflet-tile { width: 513px !important; height: 513px !important; }

/* Map drag lock: dragging starts off; this button toggles it on. */
.ex-map-drag { position: absolute; top: 10px; right: 10px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; color: var(--ex-muted); cursor: pointer; box-shadow: 0 2px 8px rgba(25, 35, 30, .16); }
.ex-map-drag:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-map-drag.is-on { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-dark .ex-map-drag:not(.is-on) { background: #2c2f2d; border-color: #3b3e3c; }
.ex-dark .ex-facet-caret { background: #2c2f2d; border-color: #3b3e3c; }

/* Mobile-only chrome stays hidden on desktop. */
.ex-map-tab, .ex-filters-tab, .ex-sb-close, .ex-mset-btn, .ex-map-grab, .ex-map-drag, .ex-map-view, .ex-card-view-btn { display: none; }

/* The View pill works on desktop too: clicking a card zooms the map to its
   pins and shows this pill centered on the thumbnail; only the pill opens
   the page. v0.27.0: 10px corners, centered, and clickable. */
.ex-card-view-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; align-items: center; justify-content: center; padding: 9px 22px; border-radius: 10px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff); font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(15, 22, 18, .3); cursor: pointer; }
.ex-card.is-map-focus { position: relative; }
.ex-card.is-map-focus .ex-card-view-btn { display: inline-flex; }

@media (max-width: 940px) {
	/* One column; the sidebar leaves the flow and becomes a drawer. */
	.ex-layout { display: block; }

	/* Submenu: full-bleed bar stuck to the very top of the screen (the
	   site menu hides itself on scroll). */
	/* Nothing shows above the submenu on load: the shell's top padding and
	   border go, so the bar sits flush at the very top of the widget. */
	.ex-widget { padding-top: 0; border-top: 0; border-radius: 0 0 16px 16px; }
	.ex-topbar { top: 0; margin: 0 calc(50% - 50vw) 14px; padding: 10px 14px; border-radius: 0; border-left: 0; border-right: 0; }
	.ex-topbar::before { display: none; }
	.ex-topbar-row { display: flex; align-items: center; gap: 8px; }
	.ex-topbar-left { flex: 1 1 auto; }
	.ex-topbar-types { display: none; }

	/* Row 2: group chip + up/down + count stay; every other control folds
	   into the one settings button on the right, which pops out a panel. */
	.ex-mset-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; color: var(--ex-ink); cursor: pointer; }
	.ex-mset-btn svg { display: block; }
	.ex-topbar-controls { position: absolute; top: calc(100% + 8px); right: 10px; z-index: 45; display: none; flex-direction: column; align-items: stretch; gap: 4px; width: min(300px, 82vw); max-height: min(66vh, 430px); overflow-y: auto; padding: 12px 14px 14px; border: 1px solid var(--ex-line); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(25, 35, 30, .2); }
	.ex-mset-open .ex-topbar-controls { display: flex; }
	.ex-topbar-controls .ex-map-btn { display: none; }
	/* One flat settings panel: the Sort and View dropdowns render open and
	   inline; their trigger buttons retire. */
	.ex-topbar-controls .ex-dd { position: static; }
	.ex-topbar-controls .ex-dd-btn { display: none; }
	.ex-widget .ex-topbar-controls .ex-dd-menu, .ex-widget .ex-topbar-controls .ex-dd-menu[hidden] { display: block !important; position: static; z-index: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
	.ex-topbar-controls .ex-sortbox { position: relative; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; border: 0; background: transparent; }
	.ex-topbar-controls .ex-sortbox::before { content: "Sort"; display: block; min-height: 26px; margin: 4px 4px 8px; line-height: 26px; }
	/* Section titles (Sort / Group by / Layout) read as real headers. */
	.ex-topbar-controls .ex-sortbox::before, .ex-topbar-controls .ex-vm-label { color: var(--ex-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
	/* The up/down pair sits right-aligned on the Sort title row. */
	.ex-topbar-controls .ex-sortbox .ex-sort-dir { position: absolute; top: 0; right: 0; flex-direction: row; gap: 5px; min-height: 30px; margin: 0; padding: 4px 10px; border: 1px solid var(--ex-line); border-radius: 8px; }
	/* Layout row: the view switch and the size stepper each take half. */
	.ex-topbar-controls .ex-vm-row { width: 100%; gap: 8px; }
	.ex-topbar-controls .ex-vm-row .ex-view-switch, .ex-topbar-controls .ex-vm-row .ex-cols { flex: 1 1 0; min-width: 0; justify-content: center; }
	.ex-dark .ex-topbar-controls, .ex-dark .ex-mset-btn { background: #2c2f2d; border-color: #3b3e3c; }

	/* Mobile cascade: back < , accent parent deck behind the active pill,
	   children in one horizontally scrolling row. */
	.ex-cascade-m { flex-wrap: nowrap; overflow-x: hidden; }
	/* The selected pill stays put; only the row of its children scrolls,
	   fading out at both edges instead of cutting off. */
	.ex-cascade-kids { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent); }
	.ex-cascade-kids::-webkit-scrollbar { display: none; }
	.ex-cascade-back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 0 2px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; color: var(--ex-ink); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
	.ex-dark .ex-cascade-back { background: #2c2f2d; border-color: #3b3e3c; color: #cfd4d0; }
	.ex-cascade-deckbtn.is-path .ex-cascade-deck i { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); opacity: 1; }
	.ex-cascade-deckbtn.is-path .ex-cascade-deck i:nth-last-child(2) { opacity: .7; }
	.ex-cascade-deckbtn.is-path .ex-cascade-deck i:nth-last-child(3) { opacity: .45; }

	/* Filters: off-canvas drawer + fixed funnel tab on the left edge. The
	   drawer has no auto-close: only the X or the tab dismiss it. */
	/* The drawer hangs below the site's top menu and only grows as tall
	   as its content, so collapsed folders leave a short panel. */
	.ex-sidebar { position: fixed; top: 56px; bottom: auto; left: 0; z-index: 9100; width: min(330px, 88vw); height: auto; max-height: calc(100vh - 66px); margin: 0; overflow-y: auto; border-radius: 0 14px 14px 0; background: #fff; box-shadow: 8px 0 30px rgba(15, 22, 18, .25); transform: translateX(-105%); transition: transform .22s ease; }
	/* Type filter chips: two rows that scroll sideways. */
	.ex-sidebar .ex-type-pills { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.ex-sidebar .ex-type-pills::-webkit-scrollbar { display: none; }
	.ex-filters-open .ex-sidebar { transform: none; }
	.ex-sidebar .ex-panel { min-height: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; }
	.ex-dark .ex-sidebar { background: #232524; }
	.ex-widget .ex-sb-tab { display: none; }
	/* In the mobile drawer nothing can hang off the fixed edge without
	   getting clipped, so the adventure tabs sit in the drawer flow. */
	.ex-widget .ex-adv-share-tab,
	.ex-widget .ex-adv-hide-tab { position: static; width: 34px; margin: 10px 0 0 10px; padding: 0; border: 1px solid #6a6a6a; border-radius: 9px; box-shadow: none; }
	.ex-widget .ex-sb-handle { display: none; }
	/* The mobile drawer ignores the desktop collapsed state entirely. */
	.ex-sb-collapsed .ex-layout { display: block; }
	.ex-sb-collapsed .ex-sidebar { position: fixed; top: 56px; max-height: calc(100vh - 66px); overflow-y: auto; }
	.ex-sb-collapsed .ex-panel { flex-direction: column; align-items: stretch; height: auto; min-height: 100%; max-height: none; padding: 16px; overflow: visible; animation: none; }
	.ex-sb-collapsed .ex-panel > *:not(.ex-head) { display: flex; }
	.ex-sb-collapsed .ex-panel > .ex-active[hidden] { display: none; }
	.ex-sb-collapsed .ex-panel .ex-head { display: block; margin: 0 0 18px; overflow: visible; }
	.ex-sb-collapsed .ex-copy { display: block; }
	.ex-sb-collapsed .ex-topbar, .ex-widget.ex-side-right.ex-sb-collapsed .ex-topbar { margin-left: 0; margin-right: 0; }
	.ex-sb-close { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ex-line); border-radius: 50%; background: #fff; color: var(--ex-muted); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
	.ex-sb-close:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
	.ex-dark .ex-sb-close { background: #2c2f2d; border-color: #3b3e3c; }
	/* White edge tab: just the line filter icon. */
	.ex-filters-tab { position: fixed; top: 42%; left: 0; z-index: 9099; display: inline-flex; align-items: center; justify-content: center; padding: 12px 10px; border: 1px solid var(--ex-line); border-left: 0; border-radius: 0 10px 10px 0; background: #fff; color: var(--ex-ink); cursor: pointer; box-shadow: 3px 2px 12px rgba(15, 22, 18, .18); }
	.ex-dark .ex-filters-tab { background: #2c2f2d; border-color: #3b3e3c; color: #e9ebe9; }

	/* Map: fixed bottom tray, closed by default; its tab rides the top
	   edge. The toolbar map button and drag handles retire on mobile. */
	.ex-map,
	.ex-body-side .ex-map,
	.ex-widget.ex-side-right .ex-body-side .ex-map { position: fixed; left: 0; right: 0; bottom: 0; top: auto; order: 0; height: var(--ex-tray-h, 34vh); margin: 0; border: 0; border-top: 1px solid var(--ex-line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(15, 22, 18, .25); z-index: 9000; transform: translateY(103%); transition: transform .25s ease; }
	.ex-map-tray-open .ex-map { transform: none; }
	.ex-body-side { display: block; }
	.ex-map-handle { display: none; }
	.ex-map-btn { display: none; }
	/* Resting just above the sticky results count, and behind the map's own
	   9000 z-index, so opening/resizing the tray never floats the tab on
	   top of the map surface. */
	.ex-map-tab { position: fixed; bottom: var(--ex-count-h, 40px); left: 50%; z-index: 8990; display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px 12px; border: 0; border-radius: 14px 14px 0 0; background: var(--ex-accent); color: var(--ex-accent-ink, #fff); cursor: pointer; box-shadow: 0 -4px 14px rgba(15, 22, 18, .3); transform: translateX(-50%); transition: bottom .25s ease; }
	.ex-map-tray-open .ex-map-tab { bottom: var(--ex-tray-h, 34vh); }
	/* Keep the results tally readable above ordinary grid content - still
	   well under the tab/tray so opening the map still covers it. */
	.ex-count { z-index: 9100; }
	/* Grab bar on the tray's top edge: drag up or down to resize the map. */
	.ex-map-tray-open .ex-map-grab { display: flex; }
	.ex-map-grab { position: absolute; top: 0; left: 50%; z-index: 1200; align-items: center; justify-content: center; width: 66px; height: 20px; padding: 0; border: 1px solid var(--ex-line); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; cursor: ns-resize; touch-action: none; transform: translateX(-50%); }
	.ex-map-grab i { display: block; width: 26px; height: 7px; border-top: 2px solid var(--ex-muted); border-bottom: 2px solid var(--ex-muted); }
	.ex-dark .ex-map-grab { background: #2c2f2d; border-color: #3b3e3c; }
	/* The drag lock button is phone-only chrome now. */
	.ex-map-drag { display: inline-flex; }
	/* Tap a card: the tray zooms to its pin and this button opens the page. */
	.ex-map-view { position: absolute; right: 12px; bottom: 34px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; padding: 9px 26px; border: 0; border-radius: 999px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff); font-size: 13px; font-weight: 800; letter-spacing: .02em; text-decoration: none; box-shadow: 0 4px 14px rgba(15, 22, 18, .3); }
	/* View pill on the tapped grid card itself (phone tap flow). */
	.ex-card-view-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; align-items: center; justify-content: center; padding: 9px 22px; border-radius: 10px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff); font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(15, 22, 18, .3); cursor: pointer; }
	.ex-card.is-map-focus { position: relative; }
	.ex-card.is-map-focus .ex-card-view-btn { display: inline-flex; }

	/* The -/+ size stepper keeps working on phones: columns derive from the
	   card-size variable instead of a hard two-up. */
	.ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--ex-card-min, 210px) * .78), 100%), 1fr)); gap: calc(var(--ex-grid-gap, 12px) * .75); }
	.ex-card-mode .ex-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--ex-card-min-card, 330px), 100%), 1fr)); }

	/* The results tally bar goes full-bleed to match the submenu. */
	.ex-count { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
}

/* --- Fullscreen mode: the widget pins to the browser viewport so fast
   scrolling can't slide the page around underneath it. Zeroing the sticky
   offset makes the submenu and sidebar stick to the overlay's very top. */
.ex-widget.ex-fullscreen { position: fixed; inset: 0; z-index: 2147483000; margin: 0; padding: 18px 22px 28px; background: var(--ex-shell, #fff); overflow-y: auto; --where-sticky-offset: 0px; }
body.ex-fs-lock { overflow: hidden; }
.ex-fs-btn .ex-fs-close { display: none; }
.ex-widget.ex-fullscreen .ex-fs-btn { color: var(--ex-accent); }
.ex-widget.ex-fullscreen .ex-fs-btn .ex-fs-open { display: none; }
.ex-widget.ex-fullscreen .ex-fs-btn .ex-fs-close { display: block; }

/* --- Adventure Creator (beta): Wanderlog-style quick itinerary. --- */
.ex-adv-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; color: var(--ex-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .12s ease, background .12s ease; }
.ex-adv-toggle:hover { color: var(--ex-ink); background: var(--ex-accent-soft); }
.ex-adv-toggle.is-active { border-color: var(--ex-accent); background: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-adv { position: relative; margin: 0; border: 1px solid #6a6a6a; border-radius: 12px; background: #777777; padding: 12px; }
.ex-adv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ex-adv-title { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ex-adv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; border-radius: 999px; background: #333333; color: #fff; font-size: 11px; }
.ex-adv-clear { border: 0; background: none; color: #e8e8e8; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.ex-adv-clear:hover { color: #ffd9d2; }
.ex-adv-list { list-style: none; margin: 0; padding: 0; counter-reset: adv; display: flex; flex-direction: column; gap: 6px; }
.ex-adv-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; cursor: grab; counter-increment: adv; }
.ex-adv-item:hover { border-color: var(--ex-accent); }
.ex-adv-item.is-dragging { opacity: .45; }
.ex-adv-thumb { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; background: var(--ex-accent-soft) center/cover no-repeat; }
.ex-adv-thumb::after { content: counter(adv); position: absolute; left: -6px; top: -6px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ex-accent); color: var(--ex-accent-ink, #fff); font-size: 10px; font-weight: 800; }
.ex-adv-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ex-adv-name { font-size: 13px; font-weight: 700; color: var(--ex-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-adv-loc { font-size: 11px; color: var(--ex-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-adv-remove { margin-left: auto; flex: 0 0 auto; border: 0; background: none; color: var(--ex-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.ex-adv-remove:hover { color: #c0392b; }
.ex-adv-empty { margin: 0; color: #f0f0f0; font-size: 12px; }
/* The + button every card wears while Adventure mode is on. */
.ex-adv-on .ex-card { position: relative; }
.ex-adv-add { position: absolute; top: 8px; right: 8px; z-index: 3; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ex-ink); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 22, 18, .3); transition: background .12s ease, color .12s ease; }
.ex-adv-on .ex-card .ex-adv-add { display: inline-flex; }
.ex-adv-add:hover, .ex-adv-add.is-added { background: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-dark .ex-adv-item { background: #232524; border-color: #3b3e3c; }
.ex-dark .ex-adv-toggle { background: #232524; }
.ex-dark .ex-topbar-row { background: rgba(255, 255, 255, .06); }

/* Adventure route + itinerary extras. */
.ex-adv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ex-adv-share, .ex-adv-gmaps { border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 4px 9px; background: none; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.ex-adv-share:hover, .ex-adv-gmaps:hover { background: rgba(255, 255, 255, .16); }
.ex-adv-route { border: 0; border-radius: 8px; padding: 5px 10px; background: #f5c518; color: #333; font-size: 11px; font-weight: 800; cursor: pointer; }
.ex-adv-route:hover { background: #ffd83d; }
.ex-adv-leg { font-size: 10px; font-weight: 700; color: #333; }
.ex-adv-route-sum { margin: 8px 0 0; color: #fff; font-size: 12px; font-weight: 700; }

/* Adventure mode pins: every PNG pin collapses into a small #333 dot;
   items on the list get their yellow pin back (JS swaps the src). */
.ex-adv-on .ex-pin img { display: none; }
.ex-adv-on .ex-pin::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #333333; transform: translate(-50%, 50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.ex-adv-on .ex-pin.is-hover::before { transform: translate(-50%, 50%) scale(1.5); }
.ex-adv-on .ex-pin.is-adv-sel::before { content: none; }
.ex-adv-on .ex-pin.is-adv-sel img { display: block; }

/* Keep Leaflet's own controls above the grab handles. */
.ex-map .leaflet-top, .ex-map .leaflet-bottom { z-index: 1300; }

/* Marker clusters: brand-tinted counts over the default rings. */
.ex-map .marker-cluster { background: rgba(255, 255, 255, .65); }
.ex-map .marker-cluster div { background: var(--ex-accent); color: var(--ex-accent-ink, #fff); font-weight: 800; }

/* Near Me locate button - sits left of the zoom control, all viewports. */
.ex-map-near { position: absolute; top: 10px; right: 54px; z-index: 1300; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; color: var(--ex-muted); cursor: pointer; box-shadow: 0 2px 8px rgba(25, 35, 30, .16); }
.ex-map-near:hover { border-color: var(--ex-accent); color: var(--ex-accent); }
.ex-map-near.is-busy { opacity: .55; pointer-events: none; }
.ex-map-near.is-on { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-accent-ink, #fff); }
.ex-dark .ex-map-near:not(.is-on) { background: #2c2f2d; border-color: #3b3e3c; }

/* Adventure v0.16.0: share tab, Create row, leg chips, days, cycle bar. */
/* Adventure tabs: attached to the builder box - they overlap its right
   border (same dark grey, so they read as part of the box) and JS pins
   their top to the box while the panel scrolls. They stay on the aside so
   the panel's scrollbox cannot clip the part hanging off the column. */
.ex-adv-share-tab { position: absolute; top: 14px; left: 100%; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 36px; margin-left: -18px; padding: 0 0 0 18px; border: 1px solid #6a6a6a; border-left: 0; border-radius: 0 9px 9px 0; background: #777777; color: #fff; cursor: pointer; box-shadow: 4px 3px 12px rgba(15, 22, 18, .12); }
.ex-adv-share-tab:hover { background: #f5c518; border-color: #f5c518; color: #333; }
.ex-adv-hide-tab { position: absolute; top: 54px; left: 100%; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 36px; margin-left: -18px; padding: 0 0 0 18px; border: 1px solid #7d7d7d; border-left: 0; border-radius: 0 9px 9px 0; background: #8f8f8f; color: #fff; cursor: pointer; box-shadow: 4px 3px 12px rgba(15, 22, 18, .12); }
.ex-adv-hide-tab:hover { background: #9d9d9d; }
.ex-adv-share-tab[hidden],
.ex-adv-hide-tab[hidden] { display: none; }
.ex-adv-hide-tab .ex-adv-eye-show { display: none; }
.ex-adv-hide-tab.is-folded .ex-adv-eye { display: none; }
.ex-adv-hide-tab.is-folded .ex-adv-eye-show { display: block; }
.ex-widget.ex-side-right .ex-adv-share-tab { left: auto; right: 100%; margin-left: 0; margin-right: -18px; padding: 0 18px 0 0; border: 1px solid #6a6a6a; border-right: 0; border-radius: 9px 0 0 9px; box-shadow: -4px 3px 12px rgba(15, 22, 18, .12); }
.ex-widget.ex-side-right .ex-adv-hide-tab { left: auto; right: 100%; margin-left: 0; margin-right: -18px; padding: 0 18px 0 0; border: 1px solid #7d7d7d; border-right: 0; border-radius: 9px 0 0 9px; box-shadow: -4px 3px 12px rgba(15, 22, 18, .12); }
/* Folded: the builder collapses to its title strip. */
.ex-adv.is-folded > *:not(.ex-adv-head) { display: none; }
.ex-adv.is-folded .ex-adv-tools { display: none; }
.ex-adv.is-folded .ex-adv-head { margin-bottom: 0; }
.ex-adv-create { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #f0f0f0; font-size: 11px; font-weight: 800; }
.ex-adv-mode { border: 0; border-radius: 8px; padding: 5px 10px; background: #f5c518; color: #333; font-size: 11px; font-weight: 800; cursor: pointer; }
.ex-adv-mode:hover { background: #ffd83d; }
/* External outline so the active button never changes size. */
.ex-adv-mode.is-active { box-shadow: 0 0 0 2px #333; }
/* Grab handle: floats at the bottom center of the row on hover, overlaid
   on top so it never pushes the card content around. */
.ex-adv-grip { display: none; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(90deg); z-index: 3; color: #e3e3e3; font-size: 12px; line-height: 1; letter-spacing: -2px; pointer-events: none; }
.ex-adv-item:hover .ex-adv-grip { display: inline-flex; }
.ex-dark .ex-adv-grip { color: #3f4341; }
.ex-adv-day { list-style: none; margin: 4px 0 0; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ex-adv-leg-row { list-style: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 0 0 0 24px; }
.ex-adv-leg-main { display: inline-flex; border-radius: 6px; padding: 2px 8px; background: rgba(255, 255, 255, .88); color: #333; font-size: 10px; font-weight: 800; cursor: pointer; }
.ex-adv-leg-ferry { display: inline-flex; border-radius: 6px; padding: 2px 8px; background: #2f80ed; color: #fff; font-size: 10px; font-weight: 800; }
.ex-adv-item.is-cycle { border-color: #f5c518; box-shadow: 0 0 0 2px #f5c518; }
.ex-adv-leg-row.is-cycle .ex-adv-leg-main { box-shadow: 0 0 0 2px #f5c518; }
.ex-adv-cycle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.ex-adv-cycle-btn { border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 4px 9px; background: none; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.ex-adv-cycle-btn:hover { background: rgba(255, 255, 255, .16); }
.ex-adv-cycle-label { flex: 1; text-align: center; color: #f0f0f0; font-size: 11px; font-weight: 700; }

/* JJSN-SEAMFIX: overlap 256px raster tiles a hair so the hairline white grid between tile seams disappears (free tile servers only; mapbox 512 tiles are unaffected). */
.ex-tiles-256 .leaflet-tile { width: 256.5px !important; height: 256.5px !important; }

/* v0.32.0: prominent icon beside the sidebar heading - inherits the accent
   and scales with the heading font size. */
.ex-heading .ex-head-ic {
	display: inline-flex;
	align-items: center;
	vertical-align: -0.12em;
	margin-right: 0.35em;
	color: var(--ex-accent, #3a759f);
}
.ex-heading .ex-head-ic .ex-badge-ic {
	width: 0.95em;
	height: 0.95em;
}