html, body, [id=map] {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

.vh {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.rm-items {
	align-items: start;
	bottom: 48px;
	display: flex;
	font-family: system-ui, sans-serif;
	gap: 0.5rem;
	left: 12px;
	pointer-events: none;
	position: fixed;
	right: 72px;
	top: 12px;
	z-index: 400;

	--bg: #262626;
	--bg-hover: #2a2a77;
	--bg-checked: #339;
	--bg-active: #33b;
	--bg-focus: #33e;
	--bg-disabled: #444;
	--border-checked: white;
	--border-kbd: #888;
	--color: white;
	--color-disabled: #ccc;
	--color-highlight: #9f9;
	--color-warning: #f99;
	--font-size: 0.875rem;
}

.rmc {
	flex-shrink: 0;
	padding-inline-end: 0.5rem;
}

.rm-items > * {
	overflow: auto;
	pointer-events: initial;
	max-height: 100%;
	width: max-content;
}

.rm-items, .rm-items * {
	box-sizing: border-box;
}

.rmc[open] .rmc-show,
.rmc:not([open]) .rmc-hide {
	display: none;
}

.rm-settings, .rm-help, .rmc > * {
	background-color: var(--bg);
	border-radius: 3px;
	color: var(--color);
	font-size: var(--font-size);
}

.rm-settings {
	margin-inline-end: 0.5rem;
}

.rmc > * + * {
	margin-block-start: 0.5rem;
}

.rmc > form {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	overflow: hidden;
}

.rmc > summary,
.rmc > details,
.rm-help,
.rm-settings {
	padding: 0.5rem;
}


.rmc > form h2 {
	font-size: var(--font-size);
	font-weight: normal;
	margin: 0;
	padding: 0.5rem;
}

.rmc > form p {
	margin: 0;
}

.rm-row {
	display: flex;
	padding: 0 0.125rem 0.125rem;
	gap: 0.125rem;
}


.rmc button {
	background-color: var(--bg);
	border: none;
	color: var(--color);
	font-family: inherit;
	font-size: inherit;
	padding: 0.25rem 0.5rem;
}

.rmc button[disabled] {
	background-color: var(--bg-disabled);
	color: var(--color-disabled);
}

.rmc :is(button, input[type=radio] + label) {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

:is(
	.rmc button:not([disabled]),
	.rmc details:not([open])
):hover, :focus-visible {
	background-color: var(--bg-hover);
}

:is(
	.rmc button:not([disabled]),
	.rmc details:not([open])
):active {
	background-color: var(--bg-active);
}

:is(
	.rmc button:not([disabled]),
	.rmc details:not([open])
):focus-visible {
	background-color: var(--bg-focus);
}


.rmc input[type=radio] {
	position: absolute;
	opacity: 0;
}

.rmc input[type=radio] + label {
	border-inline-start: 0.25rem solid transparent;
	border-radius: 0.125rem;
	margin: 0 0.125rem 0.125rem;
	padding: 0.25rem 0.5rem;
}

.rmc .rm-row input[type=radio] + label {
	border-block-end: 0.25rem solid transparent;
	border-inline-start: none;
	border-radius: 0.125rem;
	margin: 0;
	padding-inline: 1rem;
}

.rmc [data-ld] input[type=radio] + label {
	padding-block: 0.5rem;
}

.rmc input[type=radio]:hover + label {
	background-color: var(--bg-hover);
}

.rmc input[type=radio]:checked + label {
	background-color: var(--bg-checked);
	border-color: var(--border-checked);
}

.rmc input[type=radio]:active + label {
	background-color: var(--bg-active);
}

.rmc input[type=radio]:focus-visible + label {
	background-color: var(--bg-focus);
}


/* override */
.rmc .clear-button {
	color: var(--color-warning);
}


.rm-items kbd {
	border: solid var(--border-kbd);
	border-radius: 3px;
	border-width: 1px 1px 3px;
	font-family: inherit;
	min-width: 1.5rem;
	padding: 0.125rem 0.375rem;
	text-align: center;
}


.rm-units abbr {
	text-decoration: none;
}


.rm-settings form p > * {
	display: block;
}

.rm-settings form label {
	margin-block: 0.25rem 0.5rem;
}


.rm-help {
	max-width: 70ch;
}

.rm-help h2 {
	display: inline;
	font-size: var(--font-size);
	font-weight: normal;
	margin: 0;
}

.rm-help ul {
	margin-bottom: 0;
	line-height: 1.5;
	padding-left: 1rem;
}

.rm-help li {
	margin-bottom: 0.25rem;
}

.rm-help :is(b, strong) {
	color: var(--color-highlight);
}

.rm-help kbd {
	padding: 1px 0.25rem;
	margin-inline: 1px;
}

.rm-help ul {
	font-size: 1rem;
}


.route-icon-start,
.route-icon-corner,
.route-icon-end {
	border: solid 2px;
	box-sizing: border-box;
}


.route-icon-start,
.route-icon-corner {
	border-radius: 50%;
}


.route-icon-end {
	border-radius: 3px;
}


:is(
	.route-icon-start,
	.route-icon-corner,
	.route-icon-end
):is(:hover, :focus-visible) {
	border-width: 3px;
}

:is(
	.route-icon-start,
	.route-icon-corner,
	.route-icon-end
):is(:active) {
	border-width: 4px;
}

:root {
	--start-color: #7f7;
	--route-color: #09f;
	--end-color: #f77;
}

.route-icon-start {
	border-color: var(--start-color);
}

.route-icon-corner {
	border-color: var(--route-color);
}

.route-icon-end {
	border-color: var(--end-color);
}

/*
trying to make borders outside for larger appearance when selected: 
*/
.route-view-icon-start,
.route-view-icon-end {
	border-style: solid;
	box-sizing: content-box;
}

.route-view-icon-start {
	background-color: var(--start-color);
	border-radius: 50%;
	border-color: var(--start-color);
}

.route-view-icon-end {
	background-color: var(--end-color);
	border-radius: 1px;
	border-color: var(--end-color);
}

body[data-map-mode=view] .route-selected :is(
	.route-view-icon-start,
	.route-view-icon-end
) {
	border-width: 4px;
	translate: -4px -4px;
}

:not(body[data-map-mode=view] .route-selected *):is(
	.route-view-icon-start,
	.route-view-icon-end
) {
	border-width: 0;
	translate: 0 0;
}

body:is(
	[data-map-mode=view],
	[data-map-mode=join],
	[data-map-mode=delete],
	[data-map-mode=reverse]
) :is(
	.route-icon-start,
	.route-icon-corner,
	.route-icon-end
),
body:not(
	[data-map-mode=view],
	[data-map-mode=join],
	[data-map-mode=delete],
	[data-map-mode=reverse]
) :is(
	.route-selected .route-view-icon-start,
	.route-selected .route-view-icon-end,
	.route-icon-start:not(.route-selected *),
	.route-icon-corner:not(.route-selected *),
	.route-icon-end:not(.route-selected *)
)
{
	display: none;
}

body[data-map-mode=view] .route-selected path {
	stroke-width: 10px;
}