/**
 * The filter panel of the front-end map.
 *
 * Over the right edge of the map where the map fills the window, in the flow
 * underneath it where it does not — see the media query at the bottom for which
 * is which and why.
 *
 * **The colours are the legacy panel's, read out of its stylesheet rather than
 * guessed** (`migration/bestand/assets/merged.css`, the `#filter_part` block):
 * the panel is a dark grey column, the shortcut tiles are lighter grey and turn
 * the colour of what they select, "Show results" is the WILDisland green and
 * "Clear filter" the muted red beside it. Decision E3, third class — visible
 * appearance is carried over as it stands.
 *
 * Two rules of thumb, both learned in the Divi work
 * (`AI/architecture/divi-fallstricke.md`): two classes in a selector wherever a
 * theme plausibly has a rule of its own for the element, and no reliance on a
 * theme's list, button or form styling — Divi sets all three globally.
 *
 * The panel is native where it can be: the info texts and the two drop-downs
 * are `<details>` elements, so they open, close and reach the keyboard without
 * a line of script.
 *
 * @package WildislandMap
 */

.wildisland-filters {
	/* The legacy palette. `--wildisland-quick-color` is set per shortcut from
	   the category's own term meta (E12) and has no default here — an entry
	   without a colour keeps the plain tile. */
	--wildisland-filters-accent: #75b72a;
	--wildisland-filters-accent-dark: #4b830c;
	--wildisland-filters-clear: #cc6666;
	--wildisland-filters-clear-dark: #c02525;
	--wildisland-filters-panel: #333;
	--wildisland-filters-tile: #505050;
	--wildisland-filters-tile-hover: #333;
	--wildisland-filters-ink: #fff;
	--wildisland-filters-muted: #e0dfdf;
	--wildisland-filters-field: #fff;
	--wildisland-filters-field-line: #afafaf;
	--wildisland-filters-field-ink: #666;
	--wildisland-filters-tag: #e6e7e6;
	--wildisland-filters-tag-line: #999;

	position: relative;
	z-index: 600; /* Above Leaflet's tile and overlay panes, below its controls. */
	margin: 0 0 1.5em;
	/* Condensed, as on the legacy page, but out of what the visitor already
	   has: the panel loads no web font of its own — that would be a
	   third-party request from a map page that is otherwise free of them. */
	font-family: "Open Sans Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 1rem;
	line-height: 1.3;
}

.wildisland-filters .wildisland-filters__aside {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	align-items: flex-start;
}

/* --- The quick select ---------------------------------------------------
 *
 * The tiles the legacy map stacks beside its panel opener. Each stands for one
 * filter value; which one is on is `aria-pressed`, so the highlight follows the
 * state rather than a class somebody has to remember to set — and the colour it
 * turns is the category's own. */

.wildisland-filters .wildisland-filters__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* "LIFE Project areas / WILDislands" stands apart from the category shortcuts
   under it, and the legacy column says so twice: 20px of air and no dividing
   line (`.col1 ul.filter-opener + div ul li:first-child`). */
.wildisland-filters .wildisland-filters__quick-item:first-child {
	margin-bottom: 20px;
}

.wildisland-filters .wildisland-filters__quick-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The tile, in the legacy panel's own measurements: `padding: 12px 0 12px 15px`
   on a 16px/18px line, and the name under it at 20px/20px. They are px and not
   em because the legacy ones are — a tile that grows with the theme's base size
   would be a different tile at every site. */
.wildisland-filters .wildisland-filters__quick-button,
.wildisland-filters .wildisland-filters__toggle {
	box-sizing: border-box;
	margin: 0;
	padding: 12px 0 12px 15px;
	border: 0;
	border-radius: 0;
	background: var(--wildisland-filters-tile);
	color: var(--wildisland-filters-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

/* The gap the legacy column carries between the opener and the shortcuts below
   it — `ul.filter-opener { margin-bottom: 100px }`, and 20px from the 1366px
   breakpoint down (`merged.css`). It is the only reason the opener reads as a
   control of its own rather than as the first of six tiles. **After** the rule
   above, not before it: that one sets the shorthand `margin`, and at equal
   specificity the later rule is the one that counts. */
.wildisland-filters .wildisland-filters__toggle {
	margin-bottom: 20px;
}

@media (min-width: 1367px) {
	.wildisland-filters .wildisland-filters__toggle {
		margin-bottom: 100px;
	}
}

.wildisland-filters .wildisland-filters__quick-button:hover,
.wildisland-filters .wildisland-filters__toggle:hover {
	background: var(--wildisland-filters-tile-hover);
}

.wildisland-filters .wildisland-filters__quick-button[aria-pressed="true"] {
	background: var(--wildisland-quick-color, var(--wildisland-filters-accent));
}

.wildisland-filters .wildisland-filters__quick-sublabel {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;
}

.wildisland-filters .wildisland-filters__quick-label,
.wildisland-filters .wildisland-filters__toggle strong {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 20px;
}

/* The opener is the panel's own tile and stays marked while the panel is
   open — the legacy page darkens it the same way. */
.wildisland-filters.wildisland-filters--open .wildisland-filters__toggle {
	background: var(--wildisland-filters-tile-hover);
}

/* --- The panel ---------------------------------------------------------- */

.wildisland-filters .wildisland-filters__panel {
	max-width: 46em;
	margin: 0;
	padding: 40px 40px 20px;
	background: var(--wildisland-filters-panel);
	color: var(--wildisland-filters-ink);
}

/* The panel's own heading, which the legacy form carries above the intro —
   `<h2>Characteristics</h2>`, 30px and in capitals, 50px below the top of the
   dark column. It repeats the opener's word on purpose: the opener is a tile
   on the map, the heading names the sheet that just slid in. */
.wildisland-filters .wildisland-filters__heading {
	margin: 50px 0 20px;
	padding: 0;
	color: var(--wildisland-filters-ink);
	font-size: 30px;
	font-weight: 400;
	line-height: 33px;
	text-transform: uppercase;
}

.wildisland-filters .wildisland-filters__intro {
	margin: 0 0 10px;
	color: var(--wildisland-filters-muted);
	font-size: 18px;
	line-height: 1.43;
}

/* Label left, controls right, each half the sheet — the legacy `col-md-6` pair.
   Three tracks and not two, because the info button belongs beside the label
   and not at the far end of its half: the middle track soaks up whatever the
   label leaves, so the button hugs the text and the controls still begin at
   the halfway mark. */
.wildisland-filters .wildisland-filters__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 50%;
	align-items: baseline;
	column-gap: 0;
	row-gap: 0.4em;
	/* The legacy row hangs 15px into the panel's padding on both sides and
	   gives each of its cells that 15px back as a gutter. Reproduced rather
	   than approximated: it is what puts the controls column at the halfway
	   mark and still flush with the panel's right edge. */
	margin: 0 -15px 20px;
	padding: 0;
	border: 0;
	color: var(--wildisland-filters-ink);
}

.wildisland-filters .wildisland-filters__legend {
	/* A `legend` inside a grid is laid out by the browser as it pleases, so it
	   is placed explicitly instead. `float: left` is what makes it take part in
	   the grid at all in Chrome and Safari. */
	float: left;
	margin: 0;
	padding: 0 0 0 15px;
	color: var(--wildisland-filters-ink);
	font-size: 24px;
	font-weight: 400;
	line-height: 34px;
}

/* A row without an info button leaves the middle track empty, and its controls
   would slide into it. Named rather than auto-placed for that reason. */
.wildisland-filters .wildisland-filters__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-column: 3;
	gap: 10px 15px;
	padding: 0 15px;
}

/* A row of boxes is tighter than a row of fields: the legacy panel separates a
   checkbox from the next letter by the 10px of `span.label`'s own padding and
   nothing else. With 15px the five hydro-morphology boxes no longer fit the
   column and the last one dropped to a line of its own. */
.wildisland-filters .wildisland-filters__row--checkboxes .wildisland-filters__controls,
.wildisland-filters .wildisland-filters__row--flag .wildisland-filters__controls {
	gap: 10px;
}

/* --- The info texts -----------------------------------------------------
 *
 * `<details>` with a round summary: the legacy panel puts the same sentences
 * behind a Bootstrap popover, which needs a library and does not open with a
 * keyboard. What it looks like is the legacy one's, measured on the rendered
 * snapshot (`scripts/measure-bestand.sh <width> kartenfilter`, 2026-10-08, the
 * same at 1920, 1366 and 375px — NA15 in AI/plans/done/nacharbeiten.md):
 *
 *   button    30 × 30px, 5px after the label, centred on its line; inside it a
 *             filled 20px circle in the WILDisland green with the "i" cut out
 *             (`info_new.png`), no frame, no hover
 *   popover   above the button, its arrow pointing down at it: white, 1px
 *             `rgba(0,0,0,.2)` frame, 6px corners, shadow `0 5px 10px
 *             rgba(0,0,0,.2)`, at most 276px wide, text 14px/20px black with
 *             9px/14px of padding, in the site's body face (Poppins) and not in
 *             the panel's condensed one
 *   arrow     11px, `rgba(0,0,0,.25)` outside and white inside, 10px of the
 *             popover's margin between box and button
 *
 * The "i" is the summary's own text in the panel's colour, so it is "cut out"
 * of the circle and still a letter a screen reader can skip for the label. */

.wildisland-filters .wildisland-filters__info {
	position: relative;
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
}

.wildisland-filters .wildisland-filters__info-summary {
	display: inline-flex;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	/* 20px of circle in a 30px button: the click target is the legacy
	   button's, the picture the legacy picture's. */
	background: radial-gradient(circle closest-side, var(--wildisland-filters-accent) 9.5px, transparent 10px);
	color: var(--wildisland-filters-panel);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

.wildisland-filters .wildisland-filters__info-summary::-webkit-details-marker {
	display: none;
}

.wildisland-filters .wildisland-filters__hint {
	/* 0 unless filters.js has had to move the text away from an edge; set
	   inline there, which wins over this. */
	--wildisland-hint-shift: 0px;

	position: absolute;
	z-index: 10;
	/* Above the button and centred on it; filters.js moves it back inside the
	   window where centring would push it over an edge, and the arrow by the
	   same amount the other way (`--wildisland-hint-shift`), as Bootstrap's
	   own placement does. */
	bottom: calc(100% + 10px);
	left: 50%;
	box-sizing: border-box;
	width: max-content;
	max-width: min(276px, calc(100vw - 20px));
	margin: 0;
	padding: 9px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	background: var(--wildisland-filters-field);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	color: #000;
	font-family: Poppins, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	transform: translateX(calc(-50% + var(--wildisland-hint-shift)));
}

/* The arrow: an 11px triangle in the frame's colour with a 10px white one
   over it, so the frame runs on along its two sides — Bootstrap 3's own
   construction. */
.wildisland-filters .wildisland-filters__hint::before,
.wildisland-filters .wildisland-filters__hint::after {
	position: absolute;
	left: calc(50% - var(--wildisland-hint-shift));
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	content: "";
}

.wildisland-filters .wildisland-filters__hint::before {
	bottom: -11px;
	margin-left: -11px;
	border-width: 11px 11px 0;
	border-top-color: rgba(0, 0, 0, 0.25);
}

.wildisland-filters .wildisland-filters__hint::after {
	bottom: -10px;
	margin-left: -10px;
	border-width: 10px 10px 0;
	border-top-color: var(--wildisland-filters-field);
}

/* --- Checkboxes --------------------------------------------------------- */

/* The letter first, then its box — the order of the legacy row, reached with
   `row-reverse` rather than by moving the markup: a `<label for>` that comes
   before its checkbox in the DOM is what tells a screen reader the two belong
   together, and reordering the source would trade that for a visual detail. */
.wildisland-filters .wildisland-filters__choice {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0;
}

/* The letter on the box — 21px and thin, as `span.label` in the legacy panel,
   with the same 10px between it and the box. */
.wildisland-filters .wildisland-filters__choice label {
	margin: 0;
	padding-right: 10px;
	color: var(--wildisland-filters-ink);
	font-size: 21px;
	font-weight: 200;
	line-height: 21px;
	cursor: pointer;
}

.wildisland-filters .wildisland-filters__input {
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	padding: 0 0.5em;
	border: 2px solid var(--wildisland-filters-field-line);
	border-radius: 0;
	background: var(--wildisland-filters-field);
	color: var(--wildisland-filters-field-ink);
	font: inherit;
}

/* "from" and "to" split the controls column in half, as the legacy `col-md-6`
   pair inside it does. */
.wildisland-filters .wildisland-filters__bound {
	display: inline-flex;
	flex: 0 0 calc((100% - 15px) / 2);
	align-items: center;
	margin: 0;
	font-weight: 400;
}

/* --- The drop-downs ----------------------------------------------------- */

.wildisland-filters .wildisland-filters__dropdown {
	position: relative;
	display: block;
	width: 100%;
}

.wildisland-filters .wildisland-filters__dropdown-summary {
	box-sizing: border-box;
	display: block;
	height: 35px;
	padding: 0 10px;
	border: 2px solid var(--wildisland-filters-field-line);
	background: var(--wildisland-filters-field);
	color: #a1a1a1;
	font-size: 0.9em;
	line-height: 31px;
	cursor: pointer;
	list-style: none;
}

.wildisland-filters .wildisland-filters__dropdown-summary::-webkit-details-marker {
	display: none;
}

.wildisland-filters .wildisland-filters__dropdown-summary::after {
	float: right;
	content: "▾";
}

.wildisland-filters .wildisland-filters__menu {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	width: 100%;
	min-width: 16em;
	/* Nine countries fit; a vocabulary that grows scrolls rather than covering
	   the map. */
	max-height: 18em;
	overflow-y: auto;
	padding: 0.5em;
	border: 2px solid var(--wildisland-filters-field-line);
	border-top: 0;
	background: var(--wildisland-filters-field);
	color: var(--wildisland-filters-field-ink);
}

.wildisland-filters .wildisland-filters__menu-item {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	margin: 0;
	padding: 0.25em 0.1em;
	color: #6b6b6b;
	font-size: 0.95em;
	font-weight: 400;
	cursor: pointer;
}

.wildisland-filters .wildisland-filters__select-all {
	width: 100%;
	margin: 0 0 0.5em;
	padding: 0.4em;
	border: 0;
	background: var(--wildisland-filters-tag);
	color: var(--wildisland-filters-field-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
}

/* --- The tag list ------------------------------------------------------- */

.wildisland-filters .wildisland-filters__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	width: 100%;
	margin: 0.5em 0 0;
	padding: 0;
	list-style: none;
}

.wildisland-filters .wildisland-filters__tags li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wildisland-filters .wildisland-filters__tag {
	position: relative;
	margin: 0;
	padding: 5px 12px 5px 28px;
	border: 2px solid var(--wildisland-filters-tag-line);
	border-radius: 0;
	background: var(--wildisland-filters-tag);
	color: var(--wildisland-filters-field-ink);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

/* The cross the legacy tag carries, drawn rather than pulled from an icon
   font — the panel brings no font of its own. */
.wildisland-filters .wildisland-filters__tag::before {
	position: absolute;
	left: 10px;
	content: "×";
	color: #a1a1a1;
	font-weight: 700;
}

.wildisland-filters .wildisland-filters__tag:hover::before {
	color: var(--wildisland-filters-clear-dark);
}

/* --- Actions and counter ------------------------------------------------ */

/* Two thirds against one, as the legacy `col-md-8` / `col-md-4` pair — with
   the same 15px gutters, so the pair sits where it sits there. */
.wildisland-filters .wildisland-filters__actions {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0;
	align-items: stretch;
	margin: 20px -15px 0;
}



.wildisland-filters .wildisland-filters__submit,
.wildisland-filters .wildisland-filters__clear {
	/* The 15px gutter of the cell the legacy button sits in. */
	margin: 0 15px;
	padding: 10px 20px;
	border: 0;
	border-radius: 0;
	color: #fff;
	font: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.43;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.wildisland-filters .wildisland-filters__submit {
	background: var(--wildisland-filters-accent);
}

.wildisland-filters .wildisland-filters__submit:hover {
	background: var(--wildisland-filters-accent-dark);
}

.wildisland-filters .wildisland-filters__clear {
	background: var(--wildisland-filters-clear);
	font-weight: 300;
	text-transform: none;
}

.wildisland-filters .wildisland-filters__clear:hover {
	background: var(--wildisland-filters-clear-dark);
}

/* The counter sits under "Show results", where the legacy panel prints it
 * inside the button. Outside it here: it changes while nobody is pressing
 * anything, and a live region inside a button is read out as part of the
 * button's own label.
 *
 * Shaped like the button above it and plainly not one (NA15, the client's
 * wish of 2026-10-08): the same column and width, so the two read as a pair,
 * but a frame in the button's green instead of its green surface, no hover,
 * no pointer — nothing that invites a click. The type is the legacy result
 * line's, measured inside the legacy button: 20px of the condensed face,
 * regular, not in capitals. 10px of air between button and line. */
.wildisland-filters .wildisland-filters__count {
	box-sizing: border-box;
	grid-column: 1;
	margin: 10px 15px 0;
	padding: 7px 10px;
	border: 2px solid var(--wildisland-filters-accent);
	color: var(--wildisland-filters-ink);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.43;
	text-align: center;
	text-transform: none;
	cursor: default;
	/* Empty until the panel has asked — and it must not collapse the row when
	   it is, or the buttons jump the first time a filter is ticked. */
	min-height: calc(1.43em + 18px);
}

/* Before the first answer there is nothing to frame. */
.wildisland-filters .wildisland-filters__count:empty {
	border-color: transparent;
}

/* The screen-reader class most themes bring, defined here because the panel
   cannot depend on one being active. Same rules as WordPress' own. */
.wildisland-filters .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	margin: -1px;
	padding: 0;
	word-wrap: normal;
}

/* --- Over the map, on the right ----------------------------------------
 *
 * Where the legacy panel is, and it took reading `merged.css` to see it:
 * `#filter_part` is a 780px sidebar fixed to the right edge of the window at
 * `height: 100vh`, parked at `right: -582px` so that only its first column —
 * the opener and the category shortcuts — shows over the map, and
 * "Characteristics" slides the rest in (`#filter_part.open { right: 0 }`).
 *
 * Rebuilt as a flex row: the same two columns in the same order — shortcuts
 * left, panel right — anchored at the right edge, so opening the panel moves
 * the shortcuts left and the panel takes the edge. The slide itself is a
 * transform on top of that (NA15), see `.wildisland-filters--sliding`.
 * The panel is `hidden` rather than parked outside the window: a parked panel
 * is still in the document — reachable by keyboard, read aloud by a screen
 * reader, and 780px of horizontal overflow on a page whose map is already
 * full-bleed.
 *
 * Only where the map fills the window. An inline map is 600px of picture on a
 * page, and a panel laid over it would cover the very thing it filters — there
 * the panel stays in the flow underneath, which is also what every screen
 * narrow enough to make two columns nonsense gets. */

@media (min-width: 641px) {
	.wildisland-map.wildisland-map--full .wildisland-filters {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		/* Shortcuts left, panel right — the legacy order, and the reason the
		   whole assembly is anchored at `right: 0` rather than laid out from
		   the left: a right-anchored box grows leftwards, so opening the panel
		   pushes the tiles aside and fills the edge it vacates. That is what
		   `#filter_part` does with `right: -582px` → `right: 0`, without the
		   582px of off-screen document. */
		flex-direction: row;
		align-items: flex-start;
		max-width: 100%;
		/* The height of the map, so that the dark panel inside can be the full
		   column the legacy `col2` is — a percentage height resolves against
		   nothing when its parent is auto. */
		height: 100%;
		max-height: 100%;
		gap: 0;
		margin: 0;
		/* The gap between the two columns is map: a visitor dragging the
		   Danube through it should move the map, not fight the form. */
		pointer-events: none;
	}

	.wildisland-map.wildisland-map--full .wildisland-filters > * {
		pointer-events: auto;
	}

	/* The slide of the legacy sidebar, `transition: all 0.5s ease` on
	   `#filter_part` — here only the transform, which assets/js/filters.js
	   sets while the panel opens and closes (`setPanel()`, NA15). The
	   duration is written down there as well. */
	.wildisland-map.wildisland-map--full .wildisland-filters.wildisland-filters--sliding {
		transition: transform 0.5s ease;
	}

	/* While the panel slides, part of it stands beyond the window's right
	   edge. `clip` and not `hidden`: it cuts that part off without making the
	   map a scroll container, so the page does not grow a horizontal
	   scrollbar for half a second and nothing else about the box changes. */
	.wildisland-map.wildisland-map--full {
		overflow-x: clip;
	}

	/* The shortcut column starts a good way down — `margin-top: 15%` of the
	   legacy 780px sidebar, and 25% above the 1366px breakpoint. Under a site
	   header lying over the map that is also what clears the dark band; the
	   panel itself does *not* move, because the legacy one runs the full height
	   of the window with the header floating over it. */
	.wildisland-map.wildisland-map--full .wildisland-filters__aside {
		margin-top: 117px;
	}

	@media (min-width: 1367px) {
		.wildisland-map.wildisland-map--full .wildisland-filters__aside {
			margin-top: 195px;
		}
	}

	/* 203px, because the legacy column is 26% of a 780px sidebar and that
	   sidebar is 780px at every desktop width. */
	.wildisland-map.wildisland-map--full .wildisland-filters__aside {
		flex-direction: column;
		width: 203px;
		gap: 0;
	}

	.wildisland-map.wildisland-map--full .wildisland-filters__quick {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	/* The hairline between two stacked shortcuts. White, not a gap: the legacy
	   column draws `border-bottom: 1px solid white` and the map does not show
	   through it. */
	.wildisland-map.wildisland-map--full .wildisland-filters__quick-item + .wildisland-filters__quick-item .wildisland-filters__quick-button {
		border-top: 1px solid var(--wildisland-filters-ink);
	}

	.wildisland-map.wildisland-map--full .wildisland-filters__quick-item:first-child + .wildisland-filters__quick-item .wildisland-filters__quick-button {
		border-top: 0;
	}

	.wildisland-map.wildisland-map--full .wildisland-filters__quick-button,
	.wildisland-map.wildisland-map--full .wildisland-filters__toggle {
		width: 100%;
	}

	/* 577px — the legacy `col2`, 74% of the same 780px sidebar. */
	/* Full height, as the legacy `col2` — a dark column from the top of the map
	   to the bottom of it, not a card the length of its own contents. */
	.wildisland-map.wildisland-map--full .wildisland-filters__panel {
		box-sizing: border-box;
		width: 577px;
		max-width: 100%;
		/* The panel is taller than a phone-sized window and shorter than a
		   desktop one; either way it scrolls inside itself rather than
		   stretching the map. */
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
	}
}

@media (max-width: 640px) {
	/* Label and info button share the first line, as on the legacy page at
	   375px (the button 5px after the label); the controls take the whole
	   width underneath. */
	.wildisland-filters .wildisland-filters__row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.wildisland-filters .wildisland-filters__controls {
		grid-column: 1 / -1;
	}

	.wildisland-filters .wildisland-filters__actions {
		grid-template-columns: 1fr;
	}

	/* One column: the counter stays directly under "Show results", which it
	   belongs to, and "Clear filter" follows it. */
	.wildisland-filters .wildisland-filters__count {
		grid-row: 2;
	}

	.wildisland-filters .wildisland-filters__clear {
		grid-row: 3;
		margin-top: 10px;
	}
}