:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #1b1f24;
	--muted: #6b7280;
	--border: #d0d5dd;
	--accent: #2563eb;
	--danger: #dc2626;
	--surface: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14171a;
		--fg: #e6e8eb;
		--muted: #9aa1ac;
		--border: #33383e;
		--accent: #5b9dff;
		--danger: #f87171;
		--surface: #1f2328;
	}
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--fg);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	/* The map canvas already fully consumes every wheel/trackpad gesture over
	   it (map-view-screen.js calls preventDefault() unconditionally), but at
	   a pan/zoom extent that consumption can still be a no-op -- and some
	   browsers (notably Safari's trackpad "rubber-band" elastic scroll) chain
	   the leftover gesture up to the page itself once its intended target
	   stops changing. Since the page is never meant to scroll at all, cut
	   that chaining off at the root rather than only where the canvas is. */
	overscroll-behavior: none;
}

.app-root {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

button {
	font: inherit;
	color: inherit;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.5em 0.9em;
	cursor: pointer;
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

button.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

button.danger {
	color: var(--danger);
}

input, select {
	font: inherit;
	color: inherit;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.4em 0.6em;
}

a {
	color: var(--accent);
}

.toolbar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}

.toolbar .spacer {
	flex: 1;
}

.screen {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.hint {
	color: var(--muted);
	font-size: 0.9em;
}

.warning-banner {
	background: color-mix(in srgb, var(--danger) 15%, var(--bg));
	border: 1px solid var(--danger);
	border-radius: 6px;
	padding: 0.5em 0.8em;
	margin: 0.5em 0.8em;
	font-size: 0.9em;
}

.info-link {
	display: flex;
	align-items: center;
	gap: 0.35em;
	background: none;
	border: none;
	color: inherit;
	text-decoration: none;
	font-size: 1.1em;
	padding: 0.3em 0.5em;
}

.app-icon {
	width: 1.6em;
	height: 1.6em;
	flex: none;
}

.info-dialog {
	max-width: 32em;
	width: calc(100% - 2em);
	max-height: 80dvh;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
}

.info-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.info-dialog-content {
	overflow-y: auto;
	padding: 1.2em 1.4em;
}

.info-dialog-content h2 {
	margin-top: 0;
}

.info-dialog-heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.info-dialog-heading .app-icon {
	width: 1.8em;
	height: 1.8em;
}

.info-dialog-heading h2 {
	margin: 0;
}

.info-dialog-content hr {
	margin: 1.2em 0;
	border: none;
	border-top: 1px solid var(--border);
}

.info-dialog a {
	color: var(--accent);
}

.info-dialog-footer {
	flex: none;
	display: flex;
	justify-content: flex-end;
	padding: 0.8em 1.4em;
	border-top: 1px solid var(--border);
}

.info-usage-steps {
	padding-left: 1.2em;
	margin: 0.5em 0;
}

.info-usage-steps li {
	margin: 0.3em 0;
}

.info-citation {
	font-size: 0.85em;
	color: var(--muted);
}

.info-license-list {
	font-size: 0.9em;
	padding-left: 1.2em;
	margin: 0.3em 0;
}

.icon-btn {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	padding: 0.3em 0.5em;
}

.map-action-dialog {
	max-width: 22em;
	width: calc(100% - 2em);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.2em 1.4em;
	background: var(--bg);
	color: var(--fg);
}

.map-action-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.map-action-menu {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.map-action-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9em;
	font-size: 1.05em;
	text-align: left;
}

.map-action-item.danger {
	color: var(--danger);
}

.map-action-icon {
	font-size: 1.2em;
	width: 1.4em;
	text-align: center;
}

.rename-dialog {
	max-width: 22em;
	width: calc(100% - 2em);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.2em 1.4em;
	background: var(--bg);
	color: var(--fg);
}

.rename-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.rename-dialog h2 {
	margin-top: 0;
}

.rename-dialog label {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-size: 0.9em;
	color: var(--muted);
	margin-bottom: 1em;
}

.rename-dialog input {
	font-size: 1.05em;
	color: var(--fg);
}

.rename-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
}