/* Map of Denmark (Grp15) on the web. The map keeps the group's own colours
   (Type.java); the panels stay quiet and neutral so the map is the subject. */
:root {
	--ink: #1c2230;
	--muted: #5b6475;
	--paper: #ffffff;
	--line: #d9dde5;
	--accent: #1f5fd6; /* the route blue */
	--shadow: 0 1px 2px rgb(20 30 50 / 0.12), 0 8px 24px rgb(20 30 50 / 0.12);
	--radius: 10px;
	color-scheme: light;
}
* {
	box-sizing: border-box;
}
/* hidden wins over the display rules below (.pop is display: flex) */
[hidden] {
	display: none !important;
}
html,
body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #a0c4fc; /* MapView's sea */
	font: 15px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
}
#map {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	cursor: grab;
	outline: none;
}
#map.dragging {
	cursor: grabbing;
}
#map:focus-visible {
	box-shadow: inset 0 0 0 3px var(--accent);
}

/* ---- the panel ---- */
.panel {
	position: fixed;
	top: 12px;
	left: 12px;
	width: min(360px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	overflow: auto;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
	z-index: 2;
}
.brand h1 {
	margin: 0 0 4px;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}
.brand p {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 0.86rem;
}
.brand .by strong {
	color: var(--ink);
}
.panel-toggle {
	display: none;
}
.planner {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.field {
	position: relative;
	margin-bottom: 8px;
}
.field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 3px;
}
.field input {
	width: 100%;
	font: inherit;
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
}
.field input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
	border-color: transparent;
}
.suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin: 2px 0 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	z-index: 3;
	max-height: 260px;
	overflow: auto;
}
.suggest li {
	padding: 7px 10px;
	cursor: pointer;
	font-size: 0.9rem;
}
.suggest li[aria-selected='true'],
.suggest li:hover {
	background: #eef3fd;
}
.row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 4px 0 6px;
}
.modes {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}
.mode {
	font: inherit;
	font-size: 0.86rem;
	padding: 6px 12px;
	border: 0;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 120ms ease;
}
.mode + .mode {
	border-left: 1px solid var(--line);
}
.mode.on {
	background: var(--accent);
	color: #fff;
}
.mode:active,
.link:active,
.zoom button:active,
.pop button:active {
	transform: scale(0.97);
}
.link {
	font: inherit;
	font-size: 0.86rem;
	border: 0;
	background: none;
	color: var(--accent);
	cursor: pointer;
	padding: 6px 4px;
}
.summary {
	margin: 6px 0;
	font-weight: 600;
}
.summary:empty {
	display: none;
}
.directions {
	margin: 0;
	padding-left: 1.3em;
	font-size: 0.88rem;
	color: var(--muted);
	max-height: 34vh;
	overflow: auto;
}
.directions li {
	padding: 2px 0;
}
.settings {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 0.86rem;
	color: var(--muted);
}
.settings select {
	font: inherit;
	padding: 4px 6px;
	border-radius: 6px;
	border: 1px solid var(--line);
	color: var(--ink);
	background: #fff;
}

/* ---- on the map ---- */
.pop {
	position: fixed;
	z-index: 3;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	transform: translate(-50%, calc(-100% - 14px));
	max-width: 240px;
}
.pop-name {
	flex-basis: 100%;
	margin: 0 2px 2px;
	font-size: 0.85rem;
	color: var(--muted);
}
.pop-name:empty {
	display: none;
}
.pop button,
.zoom button {
	font: inherit;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	transition: transform 120ms ease;
}
.tip {
	position: fixed;
	z-index: 2;
	pointer-events: none;
	background: rgb(20 24 34 / 0.85);
	color: #fff;
	font-size: 0.8rem;
	padding: 3px 8px;
	border-radius: 6px;
	transform: translate(12px, 14px);
	white-space: nowrap;
}
.zoom {
	position: fixed;
	right: 12px;
	bottom: 44px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.zoom button {
	width: 40px;
	height: 40px;
	font-size: 1.3rem;
	line-height: 1;
	box-shadow: var(--shadow);
	border: 0;
}
.attribution {
	position: fixed;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 3px 8px;
	font-size: 0.75rem;
	background: rgb(255 255 255 / 0.8);
	color: var(--muted);
	border-top-left-radius: 6px;
	z-index: 2;
}
.attribution a {
	color: inherit;
}
.open-full {
	position: fixed;
	right: 12px;
	top: 12px;
	z-index: 3;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.86rem;
	padding: 8px 12px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.noscript {
	position: fixed;
	inset: auto 0 40% 0;
	text-align: center;
	font-weight: 600;
}

/* ---- phones: the panel collapses to its header, the planner opens on demand ---- */
@media (max-width: 640px) {
	.panel {
		top: auto;
		bottom: 30px;
		left: 8px;
		width: calc(100vw - 16px);
		max-height: 62dvh;
		padding: 12px 14px;
	}
	.brand .what {
		display: none;
	}
	.panel-toggle {
		display: inline-block;
		font: inherit;
		font-size: 0.86rem;
		font-weight: 600;
		margin-top: 4px;
		padding: 7px 12px;
		border-radius: 8px;
		border: 1px solid var(--line);
		background: #fff;
		color: var(--accent);
	}
	.panel.collapsed .planner,
	.panel.collapsed .settings {
		display: none;
	}
	.zoom {
		bottom: auto;
		top: 12px;
	}
}

/* ---- inside the Work page's window: just the map and a way out ---- */
.embedded .panel {
	display: none;
}
.embedded .zoom {
	bottom: 30px;
}
/* the homepage's preview can't be touched, so no buttons */
.demo .zoom {
	display: none;
}

/* ---- the group's own look (the default): their JavaFX UI from
   stylesheet.css and the FXML files, value for value. One look shows at a
   time: body.look-original or body.look-new (app.js). ---- */
.look-original .panel,
.look-original .zoom,
.look-original .tip,
.look-original .pop,
.look-new .fx,
.embedded .fx {
	display: none !important;
}
.fx {
	--fx-panel: #2b2b2b; /* .outerBoxes */
	--fx-field: #1e1e1e; /* .typeField, the HBoxes */
	--fx-blue: #819aff; /* .submitButton, a selected .transportButton */
	--fx-text: #d5d1d1;
	font: 13px/1.3 'Segoe UI', system-ui, sans-serif;
	color: #fff;
}
.fx button {
	font: inherit;
	cursor: pointer;
}
.fx :focus-visible {
	outline: 2px solid var(--fx-blue);
	outline-offset: 2px;
}
/* an HBox with the dark field look (AddressBox, MenuButton, currentAddress) */
.fx-hbox {
	position: fixed;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	background: var(--fx-field);
	border-radius: 8px;
}
/* .outerBoxes: the route planner and the point popups */
.fx-outer {
	position: fixed;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	background: var(--fx-panel);
	border-radius: 8px;
}
.fx-dark {
	min-width: 0;
	font: inherit;
	color: #fff;
	background: var(--fx-field);
	border: 0;
	border-radius: 3px;
	padding: 4px 7px;
	outline: none;
}
.fx-dark::placeholder {
	color: gray;
}
.fx-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 0;
	border-radius: 8px;
	padding: 4px 9px;
	min-height: 25px;
	background: var(--fx-blue);
	color: #fff;
	white-space: nowrap;
}
.fx-submit:hover {
	background: #6f8ee0;
	box-shadow: 0 3px 6px rgb(0 0 0 / 0.3);
}
.fx-submit:active {
	background: #5f7bd1;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
/* copied to the clipboard */
.fx-submit.copied {
	background: #4caf50;
}
.fx-submit img,
.fx-toggle-btn img {
	width: 20px;
	height: 20px;
	display: block;
}
.fx-cancel {
	align-self: flex-start;
	border: 0;
	border-radius: 8px;
	padding: 3px 9px;
	background: var(--fx-field);
	color: #fff;
}
/* .transportButton: grey, blue once chosen */
.fx-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 9px;
	border: 1px solid #555;
	border-radius: 8px;
	background: #9a9494;
	color: #fff;
	font-size: 16px;
}
.fx-toggle-btn[aria-checked='true'],
.fx-toggle-btn[aria-pressed='true'] {
	background: var(--fx-blue);
}
.fx-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* AddressBox: top left, 10 px in */
.fx-address {
	top: 10px;
	left: 10px;
	width: min(420px, calc(100vw - 20px));
}
.fx-address .fx-dark {
	flex: 1;
	color: var(--fx-text);
}
/* RouteSearchView: in the address box's place, 350 x 600 */
.fx-route {
	top: 10px;
	left: 10px;
	width: min(350px, calc(100vw - 20px));
	height: min(600px, calc(100dvh - 60px));
}
.fx-field {
	position: relative;
}
.fx-field .fx-dark {
	width: 100%;
}
.fx-heading {
	margin: 0;
	font-size: 18px;
	color: #fff;
}
.fx-distance {
	margin: -4px 0 0;
	color: gray;
}
.fx-directions {
	flex: 1;
	min-height: 80px;
	resize: none;
	font: 16px/1.35 'Segoe UI', system-ui, sans-serif;
	color: #fff;
	background: var(--fx-field);
	border: 1px solid var(--fx-field);
	border-radius: 5px;
	padding: 6px 8px;
	scrollbar-color: #555 var(--fx-field);
}
/* the address search's suggestions, as a JavaFX context menu */
.fx-suggest,
.fx-context {
	position: absolute;
	z-index: 4;
	left: 0;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: var(--fx-field);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
	max-height: 260px;
	overflow: auto;
}
.fx-suggest {
	top: 100%;
	right: 0;
}
.fx-address .fx-suggest {
	left: 5px;
	right: 5px;
}
.fx-suggest li,
.fx-context li {
	padding: 5px 15px;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
}
.fx-suggest li[aria-selected='true'],
.fx-suggest li:hover,
.fx-context li:hover,
.fx-context li:focus {
	background: #3a3a3a;
	outline: none;
}
/* MenuButton (right: 10) and DebugMenuButton (right: 125, so left of it), top right */
.fx-menus {
	position: fixed;
	z-index: 2;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
}
.fx-menu {
	position: relative;
}
.fx-menus .fx-hbox {
	position: relative;
}
.fx-menubutton {
	border: 0;
	background: var(--fx-field);
	color: var(--fx-text);
	padding: 4px 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.fx-menubutton::after {
	content: '';
	border: 4px solid transparent;
	border-top-color: var(--fx-text);
	border-bottom: 0;
}
.fx-context {
	top: 100%;
	left: auto;
	right: 0;
	min-width: 100%;
}
.fx-context li[aria-checked='true']::before {
	content: '✓ ';
}
.fx-context li[role='menuitemradio'][aria-checked='true'] {
	color: var(--fx-blue);
}
.fx-psycho:hover,
.fx-psycho:focus {
	color: #fc1010 !important;
}
/* currentAddress: bottom left */
.fx-hover {
	left: 10px;
	bottom: 10px;
	width: min(260px, calc(100vw - 20px));
}
.fx-hover .fx-dark {
	flex: 1;
	height: 30px;
	color: var(--fx-text);
	pointer-events: none;
}
/* the point popups, 220 x 120, placed where you clicked (app.js) */
.fx-node {
	width: 220px;
	gap: 5px;
}
.fx-node-head {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
/* .label: bold grey with a little shadow */
.fx-label {
	flex: 1;
	padding: 6px 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #b6b6b6;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
	overflow-wrap: anywhere;
}
.fx-node .fx-dark[aria-invalid='true']::placeholder {
	color: #e07b7b;
}
.fx-node-row {
	gap: 8px;
	padding: 8px;
}
.fx-node .fx-toggle-btn img {
	width: 17px;
	height: 17px;
}
/* StartScreen.fxml */
.fx-start {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 30px;
	background: #2b2b2b;
	text-align: center;
}
.fx-start h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}
.fx-start-default,
.fx-start-upload {
	border: 0;
	border-radius: 10px;
	padding: 12px 24px;
	font-size: 14px !important;
	color: #fff;
	background: #4caf50;
}
.fx-start-upload {
	background: #2196f3;
}
.fx-start-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.fx-toggle {
	width: 60px;
	padding: 4px 0;
	border: 1px solid #999;
	border-radius: 3px;
	background: #ccc;
	color: #000;
}
.fx-toggle[aria-pressed='true'] {
	background: #a9a9a9;
}
.fx-start-text {
	max-width: 300px;
	min-height: 50px;
	margin: 0;
	font-size: 14px;
	color: #fff;
}
/* the switch between the two looks */
.look-to.fx-look {
	position: fixed;
	z-index: 2;
	right: 8px;
	bottom: 26px;
	border: 0;
	border-radius: 8px;
	padding: 5px 10px;
	background: var(--fx-field);
	color: var(--fx-text);
	font-size: 12px;
}
/* no mouse, so no road under it */
@media (hover: none) {
	.fx-hover {
		display: none;
	}
}
/* phones: the two menus go under the address box */
@media (max-width: 640px) {
	.fx-menus {
		top: 52px;
	}
	.fx-route {
		height: auto;
		max-height: calc(100dvh - 110px);
	}
	.fx-directions {
		min-height: 120px;
	}
}

/* ---- motion: the panel comes in line by line while the map draws itself
   in (app.js); none of it when the system asks for less motion. "backwards"
   so a finished entrance never holds on to transform (the :active presses). */
:root {
	--out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: no-preference) {
	#map.settle {
		animation: settle 1.9s var(--out) backwards;
	}
	.panel {
		animation: panel-in 0.8s var(--out) 0.15s backwards;
	}
	.brand h1 {
		animation: line-in 0.9s var(--out) 0.32s backwards;
	}
	.brand .by,
	.brand .what,
	.panel-toggle,
	.planner,
	.settings,
	.zoom button {
		animation: rise 0.7s var(--out) backwards;
	}
	.brand .by {
		animation-delay: 0.42s;
	}
	.brand .what {
		animation-delay: 0.5s;
	}
	.panel-toggle,
	.planner {
		animation-delay: 0.58s;
	}
	.settings {
		animation-delay: 0.66s;
	}
	.zoom button {
		animation-delay: 0.7s;
	}
	.zoom button + button {
		animation-delay: 0.76s;
	}
	.pop:not([hidden]) {
		animation: pop-in 0.28s var(--out) backwards;
	}
	.tip:not([hidden]) {
		animation: fade 0.18s ease-out backwards;
	}
	.summary.in {
		animation: rise 0.45s var(--out) backwards;
	}
	.summary.busy {
		animation: busy 1.1s ease-in-out infinite;
	}
	.directions li {
		animation: rise 0.5s var(--out) backwards;
		animation-delay: calc(var(--i, 0) * 35ms + 0.15s);
	}
}
@keyframes settle {
	from {
		transform: scale(1.045);
	}
}
@keyframes panel-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.985);
	}
}
@keyframes line-in {
	from {
		clip-path: inset(0 0 100% 0);
		transform: translateY(0.45em);
	}
	to {
		clip-path: inset(0 0 -25% 0);
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
@keyframes pop-in {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-100% - 4px)) scale(0.94);
	}
}
@keyframes fade {
	from {
		opacity: 0;
	}
}
@keyframes busy {
	50% {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}