/* One-screen map for the location step (issue #97). VHC-authored.
   The MapLibre control styles already ship in /dist/css/main.min.css. */

.mt-area {
	position: relative;
	overflow: hidden;
	/* clip, where the browser has it, also stops a focused element or a
	   script from scrolling the map box sideways (issue #198). */
	overflow: clip;
	min-height: 20rem;
	height: 70vh;
	background: #20383f;
	color: #20383f;
	font-family: proxima-nova, Arial, sans-serif;
}

.mt-area__map {
	position: absolute;
	inset: 0;
}

/* Only when the map cannot show (no WebGL2, or no module scripts). */
.mt-area__nomap {
	position: absolute;
	left: 1rem;
	right: 1rem;
	top: 50%;
	z-index: 1;
	margin: 0;
	transform: translateY(-50%);
	color: #fff;
	font-size: 1rem;
	line-height: 1.4;
	text-align: center;
}

.mt-area__nomap[hidden] {
	display: none;
}

/* Search sits over the top middle of the map (issue #198).
   left, right and auto margins centre the box once it reaches max-width. */
.mt-area__top {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	max-width: 30rem;
	margin: 0 auto;
	text-align: center;
	pointer-events: none;
}

.mt-area__search,
.mt-area__results {
	text-align: left;
}

.mt-area__top > * {
	pointer-events: auto;
}

.mt-area__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 1rem;
	background: #fff;
	border-radius: 1.5rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.mt-area__search:focus-within {
	outline: 3px solid #29c0b4;
	outline-offset: 1px;
}

.mt-area__search svg {
	flex: none;
	color: #29606b;
}

.mt-area__search-field {
	flex: 1;
	min-width: 0;
	display: grid;
	align-self: stretch;
}

.mt-area__search input,
.mt-area__search-hint {
	grid-area: 1 / 1;
	font: 1rem/1.25 proxima-nova, Arial, sans-serif;
}

/* A placeholder cannot wrap. This hint shares the input's space and keeps
   its height while typing, so results do not jump (issue #276). */
.mt-area__search-hint {
	align-self: center;
	padding: 0.25rem 0;
	color: #5b6f74;
	pointer-events: none;
	overflow-wrap: anywhere;
}

.mt-area__search input:not(:placeholder-shown) + .mt-area__search-hint {
	visibility: hidden;
}

.mt-area__search input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	color: #20383f;
	/* 16px stops iPhones zooming the page on focus. */
	font-size: 1rem;
	font-family: inherit;
}

/* The box shows the focus ring (:focus-within above). The site-wide
   focus ring in main.min.css is !important, so it needs one too here,
   or the field draws a second, dark ring inside the box. */
.mt-area__search input:focus,
.mt-area__search input:focus-visible {
	outline: none !important;
}

/* The site-wide focus ring sits 3px outside the field, so the Save box's
   name field looked bigger when tapped (issue #287). Like the search box,
   the field keeps only the site's own c-textbox focus look: its border turns
   rust red. */
#mt-area-ask-input:focus,
#mt-area-ask-input:focus-visible {
	outline: none !important;
}

.mt-area__search input::placeholder,
#mt-area-ask-input::placeholder {
	color: #5b6f74;
	opacity: 1;
}

.mt-area__results {
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;
	list-style: none;
	max-height: 50vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.mt-area__results li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
}

.mt-area__results li[role="option"] {
	cursor: pointer;
	border-bottom: 1px solid #e3e8e8;
}

.mt-area__results li[role="option"]:last-child {
	border-bottom: 0;
}

.mt-area__results li[role="option"]:focus {
	background: #eef6f5;
	outline: none;
}

@media (hover: hover) {
	.mt-area__results li[role="option"]:hover {
		background: #eef6f5;
		outline: none;
	}
}

.mt-area__result-name {
	font-weight: 700;
}

.mt-area__result-id,
.mt-area__result-note {
	font-size: 0.875rem;
	color: #3d5459;
}

/* The hint line (issue #218): a dark teal pill at the bottom of the map,
   white text, centred and clear of the map buttons and the credits at the
   corners. It sits above the drawing buttons while those show. The rules
   after the sheet and the landscape rules set the offsets, as for those
   buttons. */
.mt-area__status {
	position: absolute;
	left: 50%;
	bottom: 0.75rem;
	z-index: 3;
	width: max-content;
	max-width: calc(100% - 8rem);
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: 1.25rem;
	background: #20383f;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	transform: translateX(-50%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.mt-area__draw:not([hidden]) ~ .mt-area__status {
	bottom: 5.75rem;
}

/* The tools wait until the map can take a tap. */
.mt-area__status[hidden],
.mt-area__tab,
.mt-area__strip,
.mt-area__tools[hidden],
.mt-area__pick[hidden] {
	display: none;
}

/* Undo, Cancel and Finish while drawing a shape. */
.mt-area__draw {
	position: absolute;
	left: 50%;
	bottom: 2.5rem;
	z-index: 3;
	display: flex;
	gap: 0.5rem;
	transform: translateX(-50%);
}

.mt-area__draw[hidden] {
	display: none;
}

.mt-area__draw button,
.mt-area__pick button {
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 0;
	border-radius: 1.375rem;
	background: #fff;
	color: #20383f;
	font: 600 1rem proxima-nova, Arial, sans-serif;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.mt-area__draw [data-draw="finish"] {
	background: #984734;
	color: #fff;
}

.mt-area__draw button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* "Remove <name>?" after a tap on a picked block or title (issue #193).
   It sits under the search box, at the top of the map, clear of the map
   controls at the bottom and of the list when that is open. */
.mt-area__pick {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	max-width: 100%;
	margin: 0.5rem auto 0;
	padding: 0.5rem;
	border-radius: 1.5rem;
	background: rgba(32, 56, 63, 0.92);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.mt-area__pick-text {
	margin: 0 0.5rem;
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

.mt-area__pick [data-pick="remove"] {
	background: #984734;
	color: #fff;
}

/* The tools and Help sit in the white bottom bar, centred between Back and
   Next. The bar is the site's fixed .c-bottom-nav; the row takes the space
   between its two groups. */
.mt-area__tools {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
	gap: 0.125rem;
}

.mt-area__tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: #20383f;
	font: 600 0.6875rem proxima-nova, Arial, sans-serif;
	cursor: pointer;
}

.mt-area__tool-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: #20383f;
	color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	transition: background-color 0.15s ease;
}

/* In the bar: smaller icons. Below 1024 px the bar has two rows and bigger
   tools (see the block after the sheet rules). */
.mt-area__tools .mt-area__tool {
	min-width: 2.25rem;
}

.mt-area__tools .mt-area__tool-icon {
	width: 2.125rem;
	height: 2.125rem;
}

.mt-area__tools .mt-area__tool-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.mt-area__tool:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Off while zoomed out (issue #218): the chosen tool fades to the same grey
   as the others, without its brown or its underline. */
.mt-area__tool:disabled[aria-pressed="true"] {
	color: #20383f;
}

.mt-area__tool:disabled[aria-pressed="true"] .mt-area__tool-icon {
	background: #20383f;
}

.mt-area__tool:disabled[aria-pressed="true"] > span:last-child {
	text-decoration: none;
}

.mt-area__tool[aria-pressed="true"] {
	color: #984734;
}

.mt-area__tool[aria-pressed="true"] .mt-area__tool-icon {
	background: #984734;
}

/* A second sign besides colour (issue #204): a thick underline under the
   label of the chosen tool. text-decoration takes no space, so no label
   moves and no button changes size. Undo and Help never get it. */
.mt-area__tool[aria-pressed="true"] > span:last-child {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-decoration-skip-ink: none;
	text-underline-offset: 4px;
}

.mt-area__tool:focus-visible {
	outline: none;
}

/* Dark teal, not the bright teal: 3:1 or better on the white bar. */
.mt-area__tool:focus-visible .mt-area__tool-icon {
	outline: 3px solid #29606b;
	outline-offset: 2px;
}

/* The help. From 768 px wide and 660 px tall a dialog over the map section,
   with the example map and the five buttons in a row (issue #217, see the
   end of this file). Otherwise a modal over the whole page with the short
   list. It closes when the search box takes focus. The picture, the lead
   line and the Help reminder are for the desktop dialog only. */
.mt-area__guide {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
	background: rgba(32, 56, 63, 0.62);
}

.mt-area__guide-map,
.mt-area__guide-lead,
.mt-area__guide-again {
	display: none;
}

.mt-area__guide-body,
.mt-area__guide-foot {
	display: contents;
}

.mt-area__guide[hidden] {
	display: none;
}

.mt-area__guide-box {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0.5rem 1rem 0.25rem;
	border-radius: 0.75rem;
	background: #fff;
	color: #20383f;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mt-area__guide-box:focus {
	outline: none;
}

.mt-area__guide-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.25rem;
}

.mt-area__guide-title {
	margin: 0;
	font: 700 1.125rem proxima-nova, Arial, sans-serif;
}

.mt-area__guide-list {
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	font-size: 1rem;
	line-height: 1.25;
}

.mt-area__guide-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.25rem;
}

.mt-area__guide-list strong {
	font-weight: 700;
}

.mt-area__guide-list .mt-area__tool-icon {
	flex: none;
}

/* MapLibre's own controls sit a little above the bottom bar. */
.mt-area .maplibregl-ctrl-bottom-left,
.mt-area .maplibregl-ctrl-bottom-right {
	bottom: 0.75rem;
}

/* The map credits stop short of the button column on a narrow phone. */
.mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
	max-width: calc(100vw - 4.5rem);
	box-sizing: border-box;
}

/* The credits are a small round "i" at every width (issue #292); a tap opens
   the text. Below 1024 px the tap opens a modal instead (area-map.js). */
.mt-area .maplibregl-ctrl-attrib.maplibregl-compact {
	box-sizing: border-box;
	width: 2rem;
	min-height: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 1rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.mt-area .maplibregl-ctrl-attrib.maplibregl-compact-show,
.mt-area .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show {
	width: auto;
	height: auto;
	padding: 0.25rem 0.75rem 0.25rem 2.5rem;
	border-radius: 1rem;
}

.mt-area .maplibregl-ctrl-attrib-button {
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;
	background-position: center;
	background-size: 1.75rem;
}

/* A hit area of 44 px around the 32 px button. */
.mt-area .maplibregl-ctrl-attrib-button::before {
	content: "";
	position: absolute;
	inset: -0.375rem;
}

.mt-area .maplibregl-ctrl-attrib-button:focus-visible {
	outline: 3px solid #29606b;
	outline-offset: 1px;
	box-shadow: none;
}

/* The credit text in the phone modal. The links are underlined, so they show as links. */
.mt-area__credit-text {
	margin: 0;
	line-height: 1.4;
}

.mt-area__credit-text a {
	color: #29606b;
	text-decoration: underline;
}

/* The cursor follows the tool and what is under it (issue #194), as white
   shapes with a dark outline (32 px SVG, so sharp on a retina screen; the
   two numbers are the hotspot, the word after the comma the system cursor
   used if the picture fails to load). Select: an arrow where nothing can be
   clicked; a hand with a + over a block or title to add, or over the first
   corner to close a shape (a plain hand); a hand with a - over a picked part
   (remove). Add and Cut: the same gapped crosshair, with a + or a - badge.
   Dragging the map: a fist. A touch screen has no cursor. */
.mt-area[data-tool="select"] .maplibregl-canvas-container.maplibregl-interactive {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2320383f' stroke='%2320383f' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M4 2.5 L4 22 L8.6 17.6 L12 25 L15.2 23.6 L11.8 16.3 L18.2 16.3 Z'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Cpath d='M4 2.5 L4 22 L8.6 17.6 L12 25 L15.2 23.6 L11.8 16.3 L18.2 16.3 Z'/%3E%3C/g%3E%3C/svg%3E") 4 2, default;
}

.mt-area[data-tool="add"] .maplibregl-canvas-container {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2320383f' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M1 13 L9 13'/%3E%3Cpath d='M17 13 L25 13'/%3E%3Cpath d='M13 1 L13 9'/%3E%3Cpath d='M13 17 L13 25'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 13 L9 13'/%3E%3Cpath d='M17 13 L25 13'/%3E%3Cpath d='M13 1 L13 9'/%3E%3Cpath d='M13 17 L13 25'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7.8' fill='%2320383f' stroke='%23fff' stroke-width='1.4'/%3E%3Cg stroke='%23fff' fill='none' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M20.2 24 H27.8 M24 20.2 V27.8'/%3E%3C/g%3E%3C/svg%3E") 13 13, crosshair;
}

.mt-area[data-tool="cut"] .maplibregl-canvas-container {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2320383f' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M1 13 L9 13'/%3E%3Cpath d='M17 13 L25 13'/%3E%3Cpath d='M13 1 L13 9'/%3E%3Cpath d='M13 17 L13 25'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 13 L9 13'/%3E%3Cpath d='M17 13 L25 13'/%3E%3Cpath d='M13 1 L13 9'/%3E%3Cpath d='M13 17 L13 25'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7.8' fill='%2320383f' stroke='%23fff' stroke-width='1.4'/%3E%3Cg stroke='%23fff' fill='none' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M20.2 24 H27.8'/%3E%3C/g%3E%3C/svg%3E") 13 13, crosshair;
}

.mt-area[data-cursor="pointer"] .maplibregl-canvas-container.maplibregl-interactive {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2320383f' stroke='%2320383f' stroke-width='3.2' stroke-linejoin='round'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7.8' fill='%2320383f' stroke='%23fff' stroke-width='1.4'/%3E%3Cg stroke='%23fff' fill='none' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M20.2 24 H27.8 M24 20.2 V27.8'/%3E%3C/g%3E%3C/svg%3E") 11.5 2, pointer;
}

/* Over the first corner of a shape being drawn: the plain hand, no badge. */
.mt-area[data-tool="add"][data-cursor="pointer"] .maplibregl-canvas-container.maplibregl-interactive,
.mt-area[data-tool="cut"][data-cursor="pointer"] .maplibregl-canvas-container.maplibregl-interactive {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2320383f' stroke='%2320383f' stroke-width='3.2' stroke-linejoin='round'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3C/svg%3E") 11.5 2, pointer;
}

.mt-area[data-cursor="remove"] .maplibregl-canvas-container.maplibregl-interactive {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2320383f' stroke='%2320383f' stroke-width='3.2' stroke-linejoin='round'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Crect x='9.2' y='2' width='4.6' height='16' rx='2.3'/%3E%3Crect x='13.2' y='9' width='4.2' height='11' rx='2.1'/%3E%3Crect x='16.8' y='10.2' width='4.2' height='10' rx='2.1'/%3E%3Crect x='20.4' y='11.8' width='4' height='9' rx='2'/%3E%3Crect x='7' y='13' width='17.4' height='12' rx='5'/%3E%3Crect x='3' y='12.2' width='4.4' height='9.6' rx='2.2' transform='rotate(-28 5.2 17)'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7.8' fill='%23984734' stroke='%23fff' stroke-width='1.4'/%3E%3Cg stroke='%23fff' fill='none' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M20.2 24 H27.8'/%3E%3C/g%3E%3C/svg%3E") 11.5 2, not-allowed;
}

.mt-area[data-dragging="true"] .maplibregl-canvas-container.maplibregl-interactive {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2320383f' stroke='%2320383f' stroke-width='3.2' stroke-linejoin='round'%3E%3Crect x='5.5' y='9.4' width='4.4' height='9' rx='2.2'/%3E%3Crect x='9.4' y='6.8' width='4.4' height='11' rx='2.2'/%3E%3Crect x='13.3' y='6.2' width='4.4' height='11.6' rx='2.2'/%3E%3Crect x='17.2' y='7' width='4.4' height='11' rx='2.2'/%3E%3Crect x='21' y='9' width='4' height='9.4' rx='2'/%3E%3Crect x='5.5' y='12' width='19.5' height='12.5' rx='6'/%3E%3Crect x='2.8' y='14.4' width='4.6' height='7.4' rx='2.3' transform='rotate(-20 5 18)'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Crect x='5.5' y='9.4' width='4.4' height='9' rx='2.2'/%3E%3Crect x='9.4' y='6.8' width='4.4' height='11' rx='2.2'/%3E%3Crect x='13.3' y='6.2' width='4.4' height='11.6' rx='2.2'/%3E%3Crect x='17.2' y='7' width='4.4' height='11' rx='2.2'/%3E%3Crect x='21' y='9' width='4' height='9.4' rx='2'/%3E%3Crect x='5.5' y='12' width='19.5' height='12.5' rx='6'/%3E%3Crect x='2.8' y='14.4' width='4.6' height='7.4' rx='2.3' transform='rotate(-20 5 18)'/%3E%3C/g%3E%3C/svg%3E") 14 14, grabbing;
}

/* The map buttons and the legend (issue #203), copied from the old map
   (main.min.css .c-mapbox__toolbar and .c-mapbox__popup): one white box
   with round-cornered dark teal buttons, from the top: zoom in, zoom out,
   full screen, legend. The dark legend box sits to its left, lined up
   with the bottom of the white box. Absolute, so it never widens the
   control column and pushes the buttons off the map. */
.mt-area .maplibregl-ctrl.mt-area__ctrl {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	background: #fff;
	border-radius: 0.5rem;
}

.mt-area .mt-area__ctrl .mt-area__ctrl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0.5rem;
	border: 0;
	border-radius: 0.625rem;
	background-color: #29606b;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mt-area__ctrl-btn svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Touch screens keep :hover on the last tapped button. This keeps the normal colour
   there. Without it, MapLibre's near-clear hover hides the white icon. */
.mt-area .mt-area__ctrl .mt-area__ctrl-btn:hover {
	background-color: #29606b;
}

/* Beats MapLibre's own button hover. */
.mt-area .mt-area__ctrl .mt-area__ctrl-btn[aria-expanded="true"],
.mt-area .mt-area__ctrl .mt-area__ctrl-btn[aria-pressed="true"] {
	background-color: #29c0b4;
}

/* Hover only where a real pointer exists: on touch screens :hover sticks to the last tapped button. */
@media (hover: hover) {
	.mt-area .mt-area__ctrl .mt-area__ctrl-btn:not(:disabled):hover {
		background-color: #29c0b4;
	}
}

.mt-area .mt-area__ctrl .mt-area__ctrl-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.mt-area .mt-area__ctrl .mt-area__ctrl-btn:focus-visible {
	outline: 3px solid #29c0b4;
	outline-offset: 1px;
	box-shadow: none;
}

/* The old map had full screen on screens over 768 px wide only. */
@media (max-width: 768px) {
	.mt-area .mt-area__ctrl .mt-area__ctrl-full {
		display: none;
	}
}

/* Full screen: the map step alone, with the list and the bottom bar. */
.mt-area-fullscreen {
	overflow: hidden;
	background: #fff;
}

.mt-area-fullscreen > :not(#mt-area):not(#mt-area-panel):not(#mt-area-tab):not(#mt-area-strip):not(#mt-area-nav) {
	/* Beats the site's u-flex on the progress bar. */
	display: none !important;
}

/* On a short window the legend scrolls rather than run past the top of
   the map: the map height, less the space under it. On a narrow one it
   keeps clear of the left edge. */
.mt-area__legend {
	position: absolute;
	right: calc(100% + 1.625rem);
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: max-content;
	max-width: calc(100vw - 6rem);
	max-height: min(40vh, calc(100vh - var(--mt-area-top, 0px) - var(--mt-area-bottom, 0px) - 3.5rem));
	margin: 0;
	padding: 2rem 3rem 2rem 2rem;
	list-style: none;
	overflow-y: auto;
	background-color: #20383f;
	border-radius: 1rem;
	color: #fff;
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* Below 768 px the map credits run under it: sit above them. */
@media (max-width: 767px) {
	.mt-area__legend {
		bottom: 3.5rem;
	}
}

.mt-area__legend[hidden] {
	display: none;
}

.mt-area__legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

/* A thin line above "Selected whenua": it is the visitor's own selection,
   not map data (issue #231). A border, so a screen reader reads three items. */
.mt-area__legend .mt-area__legend-sep {
	padding-top: 0.5rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.3);
}

.mt-area__legend-dot {
	flex: none;
	box-sizing: border-box;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
}

/* The arrow after "Next" is for the two-row bar below 1024 px. */
.mt-area__next-arrow {
	display: none;
}

/* Bottom bar: until there is land, Next is the enabled button (the site's
   teal, white text) at quarter strength (issues #35, #289). Disabled controls
   are exempt from the contrast rule; the reason is written beside it. No hover
   pulse, as the button does nothing. */
.mt-area__next:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	animation: none;
}

@media (hover: hover) {
	.mt-area__next:disabled:hover {
		opacity: 0.25;
		cursor: not-allowed;
		animation: none;
	}
}

.mt-area__next-why {
	margin: 0;
	color: #3b4f54;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
}

.mt-area__next-why[hidden] {
	display: none;
}

/* The list of parts slides up above the bottom bar. Its own gutters: the
   site's gutter grows with the window and on a wide screen left no room
   for the text inside a 600 px panel (issue #200). */
.mt-area__panel {
	/* Above the bottom bar, whatever its height (area-map.js measures it). */
	bottom: var(--mt-area-nav, 4.125rem);
	z-index: 9996;
	overflow-x: hidden;
	--gutter-width: 1.25rem;
}

.mt-area__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mt-area__panel-title {
	margin: 0;
	font: inherit;
}

/* The count and area, and the down arrow, are for the sheet below 1024 px. */
.mt-area__panel-sum,
.mt-area__close-down {
	display: none;
}

.mt-area__panel-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.5rem -0.5rem -0.5rem 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.mt-area__total {
	margin: 0 0 0.75rem;
	font-weight: 700;
}

.mt-area__total[hidden],
.mt-area__empty[hidden] {
	display: none;
}

.mt-area__empty {
	margin: 0 0 1rem;
}

/* The name box (issue #95). */
.mt-area__name {
	margin: 0 0 1rem;
}

.mt-area__name[hidden] {
	display: none;
}

.mt-area__name-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid #29606b;
	border-radius: 0.5rem;
	background: #fff;
	color: #20383f;
	font: 400 1rem proxima-nova, Arial, sans-serif;
}

.mt-area__parts {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.mt-area__part {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid #29c0b4;
}

.mt-area__part-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

/* Type comes from the site's t-body-copy-sm class, set in area-map.js. */
.mt-area__part-kind {
	color: #3d5459;
}

.mt-area__part--cut .mt-area__part-kind {
	color: #984734;
}

.mt-area__part-name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mt-area__part-kind,
.mt-area__part-meta {
	overflow-wrap: anywhere;
}

.mt-area__part-meta {
	font-size: 0.875rem;
	color: #3d5459;
}

.mt-area__part-show,
.mt-area__part-remove {
	flex: none;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid #29606b;
	border-radius: 1.375rem;
	background: #fff;
	color: #20383f;
	font: 600 0.9375rem proxima-nova, Arial, sans-serif;
	cursor: pointer;
}

.mt-area__part-show {
	padding: 0 0.875rem;
}

.mt-area__part-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	border-color: #984734;
	color: #984734;
}

.mt-area__help {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-area__help li {
	margin-bottom: 0.75rem;
}

.mt-area__help-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

@media (min-width: 480px) {
	.mt-area__tools {
		gap: 1rem;
	}

	.mt-area__tools .mt-area__tool {
		min-width: 4rem;
		font-size: 0.9375rem;
	}

	.mt-area__tools .mt-area__tool-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.mt-area__tools .mt-area__tool-icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (min-width: 768px) {
	.mt-area__tools {
		gap: 2.5rem;
	}

	/* Equal space for Back and Next, so the tools sit in the middle of the bar. */
	#mt-area-nav > div:first-child,
	#mt-area-nav > div:last-child {
		flex: 1 1 0;
		min-width: 0;
	}

	#mt-area-nav > div:last-child {
		justify-content: flex-end;
	}

	.mt-area__panel {
		max-width: 37.5rem;
		--gutter-width: 1.5rem;
	}
}

/* The top bar and the round search button belong to the narrow layouts below. */
.mt-area__topbar,
.mt-area__search-btn {
	display: none;
}

/* Below 1024 px (phones and upright tablets), issue #97, layout A.
   The site header and the step dots give way to one 48 px dark teal bar:
   back, "Step 1 of 4 · Location", help, menu. The map fills the rest down to
   a one-row white bottom bar: the parts summary on the left (it lifts the
   list), Next on the right. Search floats at the top of the map. The tools
   are a white pill floating over the bottom of the map, and the list is a
   sheet over the bottom of the map that is sized against the free space
   between the two bars. */
@media not all and (min-width: 1024px) {
	:root {
		/* The map's own height (area-map.js writes it), less the search
		   box, so the sheet never reaches it. */
		--mt-area-sheet: min(max(calc(var(--mt-area-free, 100vh) * 0.45), 6.5rem), calc(var(--mt-area-free, 100vh) - var(--mt-area-search-bottom, 3.5rem) - 0.5rem));
		/* The top of the tools above the bottom of the map, with 0.5rem to spare. Lifted 0.5rem with the tools (issue #292). */
		--mt-tools-top: 6.625rem;
	}

	/* ---- the top bar, in place of the header and the step dots ---- */

	.o-main-layout:has(#mt-area) {
		--header-height: var(--mt-area-topbar-height, 3rem);
	}

	/* The header keeps its place (and #burgerMenu, which belongs to the
	   menu on tablets) but shows nothing of its own. */
	.o-main-layout:has(#mt-area) .c-header {
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		pointer-events: none;
	}

	.o-main-layout:has(#mt-area) .c-header > :not(#burgerMenu) {
		display: none !important;
	}

	#js-wizard:has(#mt-area) .c-progress-bar {
		display: none !important;
	}

	.mt-area__topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		box-sizing: border-box;
		min-height: 3rem;
		padding: 0 0.25rem;
		background: #29606b;
		color: #fff;
	}

	.mt-area__topbar-btn {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}

	@media (hover: hover) {
		.mt-area__topbar-btn:hover {
			background: rgba(255, 255, 255, 0.14);
		}
	}

	/* White on dark teal; the site's own ring is dark teal and would not show. */
	html body .mt-area__topbar-btn:focus-visible {
		outline: 3px solid #fff !important;
		outline-offset: -4px !important;
	}

	.mt-area__topbar-help svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	.mt-area__topbar-title {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		font: 700 1rem/1.25 proxima-nova, Arial, sans-serif;
		overflow-wrap: anywhere;
	}

	/* Menu icon, and a cross while the menu is open. */
	.mt-area__menu-close,
	.mt-area__topbar-menu[aria-expanded="true"] .mt-area__menu-open {
		display: none;
	}

	.mt-area__topbar-menu[aria-expanded="true"] .mt-area__menu-close {
		display: block;
	}

	/* The old Help button in the tool row is for 1024 px and up. */
	.mt-area__tool--help {
		display: none;
	}

	/* The credits no longer run under the legend. */
	.mt-area__legend {
		bottom: 0;
	}

	/* Full screen: the page header is not in it, so the bar needs its room
	   and the menu has nothing to open. */
	.mt-area-fullscreen .mt-area {
		margin-top: var(--mt-area-topbar-height, 3rem);
	}

	.mt-area-fullscreen .mt-area__topbar-menu {
		display: none;
	}

	/* ---- the map ---- */

	.mt-area {
		min-height: 6.5rem;
	}

	/* The page keeps room for the bar at the end, whatever its height. */
	body:has(#mt-area-nav) {
		padding-bottom: var(--mt-area-nav, 3.5rem);
	}

	/* Search floats at the top of the map, full width with margins. */
	.mt-area__top {
		top: 0.5rem;
	}

	.mt-area__search {
		min-height: 2.75rem;
	}

	.mt-area__results {
		max-height: min(50vh, max(2.75rem, calc(var(--mt-area-free, 100vh) - var(--mt-area-search-bottom, 3.5rem) - var(--mt-area-tools-height, 6rem) - 2rem)));
	}

	/* The round search button is for a phone on its side (see below). */
	.mt-area__search-btn {
		display: none;
	}

	/* ---- the tools: a white pill over the bottom of the map ---- */

	.mt-area__tools {
		position: fixed;
		box-sizing: border-box;
		max-width: calc(100% - 1rem);
		left: 50%;
		/* 1.25rem above the bar: 8 px more than before (issue #292). */
		bottom: calc(var(--mt-area-nav, 3.5rem) + 1.25rem);
		flex: none;
		justify-content: center;
		gap: 0;
		padding: 0.5rem;
		border-radius: 1.875rem;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
		transform: translateX(-50%);
		/* Away at once when the sheet comes up, back when it has gone down. */
		transition: visibility 0s linear 0.4s;
	}

	.mt-area[data-panel="open"] ~ #mt-area-nav .mt-area__tools {
		visibility: hidden;
		transition-delay: 0s;
	}

	.mt-area__tools .mt-area__tool {
		min-width: 0;
		width: 3.25rem;
		gap: 0.125rem;
		font-size: 0.8125rem;
		line-height: 1rem;
	}

	.mt-area__tools .mt-area__tool-icon {
		width: 2.75rem;
		max-width: 100%;
		height: 2.75rem;
	}

	.mt-area__tools .mt-area__tool-icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* ---- the bottom bar: one row, summary left, Next right ---- */

	#mt-area-nav {
		--gutter-width: 0.75rem;
		/* Wraps when the summary, the reason and Next do not fit one row (large text, a narrow phone). */
		flex-wrap: wrap;
		gap: 0.25rem 0.5rem;
		box-sizing: border-box;
		/* Grows with the rows (area-map.js measures the bar). */
		min-height: 3.5rem;
		padding-top: 0.375rem;
		padding-bottom: 0.375rem;
	}

	/* Back is in the top bar. */
	#mt-area-nav > div:first-child {
		display: none !important;
	}

	#mt-area-nav > div:last-child {
		display: flex;
		/* No set base size, so the bar only wraps when the narrowest this group can be does not fit beside the summary. */
		flex: 3 1 0%;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 0.25rem 0.5rem;
		min-width: min-content;
		max-width: 100%;
		margin-left: auto;
	}

	/* The reason keeps at least 8em (em of its own text, so it grows with large text). Narrower than that, it goes on its own row above Next. */
	#mt-area-nav .mt-area__next-why {
		flex: 1 1 8em;
		min-width: 8em;
		max-width: 16em;
	}

	#mt-area-nav .mt-area__next {
		flex: none;
	}

	.mt-area__strip:not([hidden]) {
		display: flex;
		/* Small base size: the summary gives way to the reason and Next before the bar wraps. */
		flex: 1 1 4.5rem;
		align-items: center;
		justify-content: flex-start;
		gap: 0.5rem;
		box-sizing: border-box;
		min-width: 0;
		height: 2.75rem;
		padding: 0 0.25rem;
		border: 0;
		background: none;
		color: #20383f;
		font: 700 0.9375rem proxima-nova, Arial, sans-serif;
		text-align: left;
		cursor: pointer;
	}

	/* On white, so the ring is dark teal and inside the button. */
	.mt-area__strip:focus-visible {
		outline: 3px solid #29606b;
		outline-offset: -3px;
		border-radius: 0.5rem;
	}

	.mt-area__strip-arrow {
		flex: none;
		transition: transform 0.2s ease;
	}

	.mt-area__strip[aria-expanded="true"] .mt-area__strip-arrow {
		transform: rotate(180deg);
	}

	#mt-area-nav > div:last-child .c-cta {
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		box-sizing: border-box;
		min-width: 7.5rem;
		min-height: 2.75rem;
		padding: 0 1rem;
		border: 0;
		border-radius: 0.75rem;
		color: #fff;
		font-weight: 700;
	}

	#mt-area-nav .c-cta--bottom-nav svg {
		flex: none;
		align-self: center;
		width: 1.25rem;
		height: 1.25rem !important;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	#mt-area-nav .c-cta--bottom-nav span:not(.c-badge) {
		padding: 0;
		font-size: 1rem;
		font-weight: 700;
	}

	#mt-area-nav .mt-area__next-arrow {
		display: block;
	}

	/* ---- the map's own buttons and the credits ---- */

	.mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl,
	.mt-area .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
		margin: 0;
	}

	.mt-area .maplibregl-ctrl-bottom-right {
		right: 0.5rem;
		bottom: var(--mt-tools-top);
	}

	.mt-area .maplibregl-ctrl-bottom-left {
		left: 0.5rem;
		bottom: 0.75rem;
	}

	/* Open credits sit above the pill, not under it. */
	.mt-area .maplibregl-ctrl-bottom-left:has(.maplibregl-compact-show) {
		bottom: var(--mt-tools-top);
	}

	/* Under the sheet the buttons and the credits are out of the way. */
	.mt-area .maplibregl-ctrl-bottom-left,
	.mt-area .maplibregl-ctrl-bottom-right {
		transition: visibility 0s linear 0.4s;
	}

	.mt-area[data-panel="open"] .maplibregl-ctrl-bottom-left,
	.mt-area[data-panel="open"] .maplibregl-ctrl-bottom-right {
		visibility: hidden;
		transition-delay: 0s;
	}

	/* The credits are a small round "i"; a tap opens the text, another
	   closes it. */
	.mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
		max-width: calc(100vw - 4.5rem);
	}

	/* ---- drawing, and the list as a sheet ---- */

	/* Undo, Cancel and Finish sit above the tools, or above the list. */
	.mt-area__draw {
		bottom: calc(var(--mt-tools-top) + 0.5rem);
		max-width: calc(100% - 6.5rem);
	}

	.mt-area[data-panel="open"] .mt-area__draw {
		bottom: calc(var(--mt-area-sheet) + 0.75rem);
	}

	/* The hint takes the place of the drawing buttons, and goes above them
	   while they show. Same width, so it keeps clear of the map buttons. */
	.mt-area__status {
		bottom: calc(var(--mt-tools-top) + 0.5rem);
		max-width: calc(100% - 6.5rem);
	}

	.mt-area[data-panel="open"] .mt-area__status {
		bottom: calc(var(--mt-area-sheet) + 0.75rem);
	}

	.mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: calc(var(--mt-tools-top) + 3.75rem);
	}

	.mt-area[data-panel="open"] .mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: calc(var(--mt-area-sheet) + 4rem);
	}

	.mt-area__draw button {
		padding: 0 0.875rem;
		font-size: 0.9375rem;
	}

	.c-bottom-nav__details.mt-area__panel,
	.c-bottom-nav__details.mt-area__panel.open {
		left: 0;
		right: 0;
		box-sizing: border-box;
		height: var(--mt-area-sheet);
		max-width: none;
		max-height: var(--mt-area-sheet);
		padding-bottom: 1rem;
		border-radius: 0.75rem 0.75rem 0 0;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
	}

	/* The header stays in view while the list scrolls under it. */
	.mt-area__panel .c-bottom-nav__details-heading {
		position: sticky;
		top: 0;
		z-index: 1;
		margin-bottom: 1rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		font-size: 1.125rem;
	}

	.mt-area__panel-head {
		gap: 0.75rem;
		justify-content: flex-start;
	}

	.mt-area__panel-title {
		flex: none;
	}

	.mt-area__panel-sum {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		font: 600 0.8125rem proxima-nova, Arial, sans-serif;
		overflow-wrap: anywhere;
	}

	.mt-area__panel-close {
		flex: none;
	}

	.mt-area__close-x {
		display: none;
	}

	.mt-area__close-down {
		display: block;
	}
}

@media (min-width: 480px) and (max-width: 1023px) {
	#mt-area-nav {
		--gutter-width: 1rem;
	}

	.mt-area__tools .mt-area__tool {
		min-width: 3.75rem;
	}
}

/* The legend is open on a tablet and sits at the bottom right, so the hint
   keeps to the left of it (issue #218). */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {
	.mt-area__status {
		left: 0.75rem;
		max-width: calc(100% - 22rem);
		transform: none;
	}
}

/* The floating tools would sit over the foot of the desktop help dialog and
   stay clickable, so they wait while it is open. Below 768 px or 660 px tall
   the help is a modal over the whole page and covers them. */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 660px) {
	.mt-area[data-help="open"] ~ #mt-area-nav .mt-area__tools {
		visibility: hidden;
		transition-delay: 0s;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.mt-area__strip:not([hidden]) {
		font-size: 1rem;
	}

	.mt-area__panel .c-bottom-nav__details-heading {
		font-size: 1.25rem;
	}
}

/* Upright but short (under 402 px tall, as when the keyboard is up): the
   map buttons would reach up under the search box, so they start below
   it. data-mt-upright is the upright layout held in a window the shape of
   a phone on its side (area-map.js). */
@media (max-width: 1023.98px) and (max-height: 401.98px) {
	html[data-mt-upright] .mt-area .maplibregl-ctrl-bottom-right {
		top: 3.75rem;
		bottom: auto;
	}
}

@media (max-width: 1023.98px) and (max-height: 401.98px) and (orientation: portrait) {
	.mt-area .maplibregl-ctrl-bottom-right {
		top: 3.75rem;
		bottom: auto;
	}
}

/* A phone on its side is short, so every bar is one row and the map keeps
   what is left. The tools stand in a rail down the left edge; search is a
   round button at the top right that opens into the search box; the map
   buttons and the credits sit in the right column under it. */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
	:where(html:not([data-mt-upright])) #mt-area-nav > div:last-child .c-cta {
		min-width: 10rem;
	}

	/* Tools: icon over label, 44 px or more tall, the chosen one filled red. */
	:where(html:not([data-mt-upright])) .mt-area__tools {
		top: 3.5rem;
		bottom: auto;
		left: 0.5rem;
		flex-direction: column;
		gap: 0.125rem;
		padding: 0.25rem;
		border-radius: 1rem;
		transform: none;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool {
		justify-content: center;
		gap: 0;
		box-sizing: border-box;
		width: 4rem;
		min-width: 0;
		min-height: 2.75rem;
		border-radius: 0.75rem;
		font-size: 0.8125rem;
		line-height: 0.875rem;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool-icon {
		width: auto;
		height: 1.375rem;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: inherit;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool-icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool[aria-pressed="true"] {
		background: #984734;
		color: #fff;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool[aria-pressed="true"] .mt-area__tool-icon {
		background: none;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool:focus-visible {
		outline: 3px solid #29606b;
		outline-offset: -3px;
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool:focus-visible .mt-area__tool-icon {
		outline: none;
	}

	/* The tools and the round button leave the search box a clear middle. */
	:where(html:not([data-mt-upright])) .mt-area__top {
		left: 5.5rem;
		right: 4rem;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-search="open"] .mt-area__top {
		right: 0.5rem;
	}

	/* Search: a round button until it is tapped (area-map.js sets
	   data-search; without it the box simply shows). */
	:where(html:not([data-mt-upright])) .mt-area[data-search="closed"] .mt-area__search,
	:where(html:not([data-mt-upright])) .mt-area[data-search="closed"] .mt-area__results {
		display: none;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-search] .mt-area__search-btn {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #fff;
		color: #29606b;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-search="open"] .mt-area__search-btn {
		display: none;
	}

	:where(html:not([data-mt-upright])) .mt-area__search-btn:focus-visible {
		outline: 3px solid #29c0b4;
		outline-offset: 1px;
	}

	/* Two rows of results scroll, so the question below still fits. They
	   stop short of the map buttons in the right column. */
	:where(html:not([data-mt-upright])) .mt-area__results {
		max-height: 6.5rem;
		margin-right: 3.5rem;
	}

	:where(html:not([data-mt-upright])) .mt-area__draw {
		bottom: 0.75rem;
		max-width: calc(100% - 12rem);
	}

	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__draw {
		bottom: calc(var(--mt-area-sheet) + 0.75rem);
	}

	:where(html:not([data-mt-upright])) .mt-area__status {
		bottom: 0.75rem;
		max-width: calc(100% - 12rem);
	}

	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__status {
		bottom: calc(var(--mt-area-sheet) + 0.75rem);
	}

	:where(html:not([data-mt-upright])) .mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: 4rem;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: calc(var(--mt-area-sheet) + 4rem);
	}

	/* Right column: search button, then the map buttons, then the "i". */
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-right {
		bottom: 3.25rem;
	}

	:where(html:not([data-mt-upright])) .mt-area .mt-area__ctrl .mt-area__ctrl-full {
		display: none;
	}

	/* The credits stay at the right and open towards the left. */
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left,
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left:has(.maplibregl-compact-show) {
		right: 0.5rem;
		bottom: 0.75rem;
		left: auto;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl {
		float: right;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
		max-width: calc(100vw - 7rem);
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button {
		right: 0;
		left: auto;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show {
		padding: 0.25rem 2.5rem 0.25rem 0.75rem;
	}

	/* The legend opens from its button only, over the map, and stays clear
	   of the rail. */
	:where(html:not([data-mt-upright])) .mt-area__legend {
		max-width: calc(100vw - 14rem);
	}
}

/* Very short (568 x 320): the "i" will not fit under the buttons, so it
   stands beside them. */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 340px) {
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-right {
		bottom: 0.75rem;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left,
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left:has(.maplibregl-compact-show) {
		right: 3.5rem;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
		max-width: calc(100vw - 11rem);
	}
}

/* Shorter still (568 x 212, a small phone on its side with the browser
   bars showing): the map is about 108 px tall. The tools stand two by two,
   the map buttons two by two in the top right corner with the search
   button to their left and the "i" under it, and the list sheet takes the
   whole map. */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 319.98px) {
	:root:not([data-mt-upright]) {
		--mt-area-sheet: var(--mt-area-free, 100vh);
	}

	:where(html:not([data-mt-upright])) .mt-area__tools {
		top: 3.25rem;
		display: grid;
		grid-template-columns: repeat(2, auto);
	}

	:where(html:not([data-mt-upright])) .mt-area__tools .mt-area__tool {
		width: 3.5rem;
	}

	/* Status, the "Remove ...?" question and the drawing buttons share the
	   middle, between the tools and the buttons at the right. */
	:where(html:not([data-mt-upright])) .mt-area__top {
		left: 8.625rem;
		right: 8.75rem;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-search="open"] .mt-area__top {
		right: 8.75rem;
	}

	/* The results take what the map has under the box. */
	:where(html:not([data-mt-upright])) .mt-area__results {
		max-height: calc(var(--mt-area-free, 100vh) - 4rem);
		margin-right: 0;
	}

	:where(html:not([data-mt-upright])) .mt-area__draw {
		bottom: 0.5rem;
		max-width: calc(100% - 17.375rem);
	}

	:where(html:not([data-mt-upright])) .mt-area__status {
		bottom: 0.5rem;
		max-width: calc(100% - 17.375rem);
	}

	:where(html:not([data-mt-upright])) .mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: 3.75rem;
	}

	:where(html:not([data-mt-upright])) .mt-area[data-search] .mt-area__search-btn {
		right: 5.5rem;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-right {
		top: 0.5rem;
		right: 0.5rem;
		bottom: auto;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl.mt-area__ctrl {
		display: grid;
		grid-template-columns: repeat(2, auto);
	}

	:where(html:not([data-mt-upright])) .mt-area__legend {
		top: 0;
		bottom: auto;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left,
	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left:has(.maplibregl-compact-show) {
		right: 5.875rem;
		bottom: 0.5rem;
	}

	:where(html:not([data-mt-upright])) .mt-area .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
		max-width: calc(100vw - 15rem);
	}

	/* The sheet covers the whole map, so the search, the hint, the
	   question and the drawing buttons wait under it, as the tools do. */
	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__search-btn,
	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__top,
	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__status,
	:where(html:not([data-mt-upright])) .mt-area[data-panel="open"] .mt-area__draw {
		visibility: hidden;
	}
}

/* Below 768 px, or on a phone on its side, the legend opens over the map
   from its button and can be wide, so the hint waits while it is open
   (issue #218). area-map.js sets data-legend. */
@media (max-width: 767px), (max-height: 500px) {
	.mt-area[data-legend="open"] .mt-area__status {
		visibility: hidden;
	}
}

/* The bottom bar from 1024 px (issue #35). Back, the tools and the Next group
   wrap onto a second row when they do not fit in one, so the reason beside
   Next never draws over a button. The reason keeps at least 8em of its own
   text, so it grows with large text, and goes on its own row above Next when
   it is narrower than that. */
@media (min-width: 1024px) {
	#mt-area-nav {
		flex-wrap: wrap;
		row-gap: 0.25rem;
	}

	#mt-area-nav > div:first-child,
	#mt-area-nav > div:last-child {
		min-width: min-content;
	}

	#mt-area-nav > div:last-child {
		flex-wrap: wrap;
		gap: 0.25rem 0.5rem;
		/* On its own row the group stays at the right edge, as on the phone. */
		margin-left: auto;
	}

	#mt-area-nav .mt-area__next-why {
		flex: 1 1 8em;
		min-width: 8em;
		max-width: 16em;
	}

	#mt-area-nav .mt-area__next {
		flex: none;
	}
}

/* Wide screens (issue #201): the list floats over the left of the map,
   between the top of the map and the bottom bar, and the map stays usable
   beside it. The search, the drawing buttons and the attribution move
   right while it is open. --mt-area-top is set by area-map.js. */
@media (min-width: 1024px) {
	.c-bottom-nav__details.mt-area__panel {
		top: calc(var(--mt-area-top, 5.3125rem) + 0.75rem);
		bottom: calc(var(--mt-area-bottom, 10.625rem) + 0.75rem);
		left: 0.75rem;
		right: auto;
		width: 22rem;
		max-width: none;
		max-height: none;
		padding-bottom: 1rem;
		border-radius: 0.75rem;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
		transform: translateX(calc(-100% - 1rem));
	}

	.c-bottom-nav__details.mt-area__panel.open {
		max-height: none;
		transform: translateX(0);
	}

	.mt-area__panel .c-bottom-nav__details-heading {
		margin-bottom: 1rem;
		font-size: 1.25rem;
	}

	/* The tab that opens the list again after X: where the list sits,
	   white with dark teal text like it. area-map.js shows it only while
	   the list is shut and there are parts. */
	.mt-area__tab:not([hidden]) {
		display: block;
		position: fixed;
		top: calc(var(--mt-area-top, 5.3125rem) + 0.75rem);
		left: 0.75rem;
		z-index: 9996;
		min-height: 2.75rem;
		padding: 0.5rem 1rem;
		border: 0;
		border-radius: 0.75rem;
		background: #fff;
		color: #29606b;
		font: 700 1rem proxima-nova, Arial, sans-serif;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
		cursor: pointer;
	}

	/* Inside the white tab, so the ring sits on white. */
	.mt-area__tab:focus-visible {
		outline: 3px solid #29606b;
		outline-offset: -6px;
	}

	/* The tab stays where it is while the list opens, under it (the list
	   comes later in the page at the same level), and goes once the list has
	   arrived. When the list shuts it is uncovered as the list leaves. */
	.mt-area[data-panel="open"] ~ .mt-area__tab {
		visibility: hidden;
		transition: visibility 0s linear 0.4s;
	}

	.mt-area[data-panel="open"] .mt-area__top {
		left: 23.5rem;
	}

	.mt-area[data-panel="open"] .mt-area__draw,
	.mt-area[data-panel="open"] .mt-area__status {
		left: calc(50% + 11.75rem);
	}

	.mt-area[data-panel="open"] .mt-area__status {
		max-width: calc(100% - 31.5rem);
	}

	.mt-area[data-panel="open"] .maplibregl-ctrl-bottom-left {
		left: 23.5rem;
	}
}

/* On wide screens the bottom of the map holds the credits box at the left
   (about 21 rem wide) and the legend at the right (about 19 rem), and a long
   hint (a long land block name, say) would run over them. The hint is a pill
   that wraps instead:
   - list shut: centred, narrow enough to stay clear of the credits box; with
     the drawing buttons showing it sits above the credits, so it only has
     to stay clear of the legend;
   - list open: above the credits row, left aligned beside the list, and
     narrow enough to stay clear of the legend (issue #218). */
@media (min-width: 1024px) {
	/* Well clear of the bar below the map (issue #292). */
	.mt-area__status {
		bottom: 2.25rem;
		max-width: calc(100% - 44.25rem);
	}

	.mt-area__draw:not([hidden]) ~ .mt-area__status {
		max-width: calc(100% - 37.75rem);
	}

	.mt-area[data-panel="open"] .mt-area__status {
		left: 24.25rem;
		bottom: 4rem;
		max-width: calc(100% - 43rem);
		transform: none;
	}

	.mt-area[data-panel="open"] .mt-area__draw:not([hidden]) ~ .mt-area__status {
		bottom: 5.75rem;
	}
}

/* Wide screens (issue #216): a taller bar with bigger buttons and bigger
   labels, close together, in a row centred between Back and Next. Back and
   Next keep their own width; the row takes the space between them. */
@media (min-width: 1024px) {
	#mt-area-nav {
		min-height: 6.25rem;
	}

	/* Equal room either side (issue #292), so with nothing beside Next the
	   tools sit in the middle of the bar, not of what is left. */
	#mt-area-nav > div:first-child,
	#mt-area-nav > div:last-child {
		flex: 1 1 0;
	}

	/* While the "nothing is left" sentence shows beside Next, the groups take
	   the room they need again, as before. Equal room would squeeze the
	   sentence to three lines and grow the bar. */
	#mt-area-nav:has(.mt-area__next-why:not([hidden])) > div:first-child,
	#mt-area-nav:has(.mt-area__next-why:not([hidden])) > div:last-child {
		flex: 0 0 auto;
	}

	/* One centre line (issue #292): Back, the five round buttons and Next are
	   all centred on the height of a round button, at the top of the bar. The
	   labels under the round buttons hang below that line. */
	#mt-area-nav {
		align-items: flex-start;
	}

	#mt-area-nav > div:first-child,
	#mt-area-nav > div:last-child {
		min-height: 3.5rem;
	}

	#mt-area-nav .mt-area__tools {
		flex: 1 1 auto;
		justify-content: center;
		gap: 0.5rem;
	}

	#mt-area-nav .mt-area__tools .mt-area__tool {
		min-width: 4.5rem;
		gap: 0.375rem;
		font-size: 1.0625rem;
	}

	#mt-area-nav .mt-area__tools .mt-area__tool-icon {
		width: 3.5rem;
		height: 3.5rem;
	}

	#mt-area-nav .mt-area__tools .mt-area__tool-icon svg {
		width: 1.75rem;
		height: 1.75rem;
	}
}

/* Below 768 px wide or 660 px tall: the modal. Full-screen dimmed backdrop over the header and
   the bottom bar too; the box covers most of it with 1rem gutters and the
   list scrolls with Close kept in view. The page behind does not scroll. */
@media (max-width: 767px), (max-height: 659px) {
	html.mt-area-modal-open,
	body.mt-area-modal-open {
		overflow: hidden;
	}

	.mt-area__guide {
		position: fixed;
		inset: 0;
		z-index: 100000;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 1rem;
		justify-content: center;
		background: rgba(10, 24, 28, 0.72);
	}

	.mt-area__guide-box {
		width: 100%;
		max-height: 100%;
		padding: 1.25rem;
		border-radius: 1rem;
	}

	.mt-area__guide-head {
		margin-bottom: 1rem;
	}

	.mt-area__guide-title {
		font-size: 1.375rem;
	}

	.mt-area__guide-list {
		flex: 0 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		font-size: 1.125rem;
		line-height: 1.35;
	}

	.mt-area__guide-list li {
		gap: 1rem;
		margin-bottom: 1.25rem;
	}

	/* The short list has the three tools and Undo; Help is for the desktop dialog. */
	.mt-area__guide-list li[data-key="help"] {
		display: none;
	}
}

/* The desktop help dialog (issue #217): a panel centred over the map
   section with a dimmed backdrop. The head is dark teal, then the example map
   with a chip, a lead line, the five buttons in a row with their instruction
   under each, and a foot with the Help reminder and Close. When the window is
   short the body scrolls and the head and foot stay. */
@media (min-width: 768px) and (min-height: 660px) {
	.mt-area__guide {
		align-items: center;
	}

	.mt-area__guide-box {
		width: 100%;
		max-width: 46rem;
		max-height: 100%;
		padding: 0;
		border-radius: 1rem;
		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
		overflow: hidden;
	}

	.mt-area__guide-head {
		flex: none;
		margin: 0;
		padding: 0.75rem 1.25rem;
		background: #29606b;
		color: #fff;
		border-bottom: 4px solid #29c0b4;
	}

	.mt-area__guide-title {
		font: 700 1.5rem/1.2 playfair-display, serif;
		color: #fff;
	}

	.mt-area__guide-body {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mt-area__guide-map {
		position: relative;
		display: block;
		margin: 0;
		overflow: hidden;
		background: #29606b;
	}

	.mt-area__guide-map img {
		display: block;
		width: 100%;
		/* area-map.js sets --mt-help-img to what the section leaves, and
		   data-fit="none" on the box when even that is too little. */
		height: var(--mt-help-img, clamp(8rem, 28vh, 14.4rem));
		object-fit: cover;
	}

	.mt-area__guide-box[data-fit="none"] .mt-area__guide-map {
		display: none;
	}

	/* The words alone can still be taller than a short section: the body
	   scrolls, takes focus for the arrow keys, and a fade says there is more. */
	.mt-area__guide-body:focus-visible {
		outline: 3px solid #29606b;
		outline-offset: -3px;
	}

	.mt-area__guide-box[data-more] .mt-area__guide-body::after {
		content: "Scroll for more \2193";
		position: sticky;
		bottom: 0;
		display: block;
		height: 2.5rem;
		margin-top: -2.5rem;
		padding-top: 1.25rem;
		box-sizing: border-box;
		background: linear-gradient(rgba(255, 255, 255, 0), #fff 65%);
		color: #29606b;
		font: 700 0.8125rem proxima-nova, Arial, sans-serif;
		text-align: center;
		pointer-events: none;
	}

	.mt-area__guide-chip {
		position: absolute;
		left: 0.75rem;
		bottom: 0.75rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.25rem 0.75rem 0.25rem 0.5rem;
		border-radius: 1rem;
		background: #20383f;
		color: #fff;
		font: 600 0.8125rem proxima-nova, Arial, sans-serif;
	}

	.mt-area__guide-chip i {
		width: 0.875rem;
		height: 0.875rem;
		border: 3px solid #fff;
		border-radius: 50%;
		background: #8cc9c4;
	}

	.mt-area__guide-lead {
		display: block;
		margin: 0;
		padding: 0.875rem 1.25rem 0;
		color: #3d5459;
		font-size: 1rem;
		text-align: center;
	}

	.mt-area__guide-list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.5rem;
		padding: 0.875rem 1rem 1rem;
		overflow: visible;
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	.mt-area__guide-list li {
		flex-direction: column;
		gap: 0.25rem;
		margin: 0;
		padding: 0.75rem 0.5rem;
		border-radius: 0.75rem;
		background: #eef6f5;
		text-align: center;
	}

	.mt-area__guide-list strong {
		display: block;
		font-size: 1.0625rem;
	}

	.mt-area__guide-list br {
		display: none;
	}

	.mt-area__guide-desc {
		display: block;
		color: #3d5459;
	}

	/* Select is the chosen tool in the bar, so it is Matarau brown here too. */
	.mt-area__guide-list li:first-child strong {
		color: #984734;
	}

	.mt-area__guide-list li:first-child .mt-area__tool-icon {
		background: #984734;
	}

	.mt-area__guide-foot {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.625rem 1.25rem;
		background: #eef6f5;
		border-top: 1px solid #d3e4e2;
		font-size: 0.9375rem;
	}

	.mt-area__guide-again {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		color: #3d5459;
	}

	.mt-area__guide-again-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: #20383f;
		color: #fff;
	}
}

/* The save prompt (issue #261). It is the help guide's dialog (the same
   box, head and foot, see above and the end of this file) with the site's own
   name box (c-textbox) and its Continue and Save buttons (c-cta). It differs from the help only
   in being fixed over the whole page on every screen size, and a little
   narrower. The page behind does not scroll while it is open
   (mt-area-ask-open: its own lock, on every screen size, so it never clashes
   with mt-area-modal-open). */
html.mt-area-ask-open,
body.mt-area-ask-open {
	overflow: hidden;
}

.mt-area__guide.mt-area__guide--ask {
	position: fixed;
	z-index: 100000;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 1rem;
	background: rgba(10, 24, 28, 0.72);
}

.mt-area__guide--ask .mt-area__guide-box {
	align-self: center;
	width: 100%;
	max-width: 28rem;
	min-height: 0;
}

/* Safari keeps the layout viewport behind the keyboard. Constrain the
   Save box to the visual viewport instead (issue #287). */
#mt-area-ask {
	top: var(--mt-area-ask-top, 0px);
	bottom: auto;
	height: var(--mt-area-ask-height, 100%);
	box-sizing: border-box;
}

#mt-area-ask .mt-area__guide-box {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The body is display: contents on the phone, so its padding would do
   nothing there: the box's own padding sets the edge gap. The padding is for
   the desktop dialog only. */
@media (min-width: 768px) and (min-height: 660px) {
	.mt-area__guide--ask .mt-area__guide-body {
		padding: 1.25rem;
	}

	/* The desktop Save box (issue #330) is a card like the other dialogs: the
	   heading band meets the white body with no teal rule under it, and the
	   box itself never scrolls (the body does), so no scrollbar track shows
	   as a white strip down its right edge. Only the Save box: the help guide
	   keeps its rule. */
	#mt-area-ask .mt-area__guide-box {
		overflow: hidden;
	}

	#mt-area-ask .mt-area__guide-head {
		border-bottom: 0;
	}
}

/* The sentence (issue #281): the guide list's line spacing, and room above
   the name box so its focus ring does not cover the last line. */
#mt-area-ask-text {
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

.mt-area__guide--ask .mt-area__guide-foot {
	justify-content: flex-end;
}

/* On the phone (issue #283) the box edge and the gap from the name box to
   Continue are 24px, then 10px from Continue to Save. The gaps from the
   title to the sentence and from the sentence to the name box are 16px, and
   the sentence is 16px text, so Save fits above the iPhone keyboard (issue
   #287). The buttons and the name box are the site's own (c-cta, c-textbox). */
@media (max-width: 767px), (max-height: 659px) {
	#mt-area-ask-text {
		margin-bottom: 1rem;
		font-size: 1rem;
		line-height: 1.35;
	}

	.mt-area__guide--ask .mt-area__guide-head {
		margin-bottom: 1rem;
	}

	#mt-area-ask-skip {
		margin-top: 1.5rem;
	}

	#mt-area-ask-save {
		margin-top: 0.625rem;
	}

	/* The map credit (issue #292) uses this box too: 24px from the credit
	   line to its Close button. */
	#mt-area-credit-close {
		margin-top: 1.5rem;
	}

	/* The bigger text makes the box taller than a short screen (the keyboard
	   open). The help guide's list scrolls then; here the whole box does, so
	   Save stays reachable. */
	.mt-area__guide--ask .mt-area__guide-box {
		padding: 1.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}