/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

:root {
  --bg: #f6f5f2;
  --panel: #ffffff;
  --panel-2: #f3f2ee;
  --ink: #1d2025;
  --ink-2: #4b5059;
  --ink-3: #868b94;
  --line: #e4e2dc;
  --accent: #0f766e;
  --accent-soft: #e3f2ef;
  --hl: #eaf4f2;
  --shadow: 0 6px 24px rgba(20, 24, 30, .12), 0 1px 3px rgba(20, 24, 30, .08);
  --card: rgba(255, 255, 255, .96);
  --chip: #f0efea;
  --sea-sat: #062252;
  --sea-line: #b8d4e4;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317; --panel: #181b20; --panel-2: #1f2329; --ink: #eceef1; --ink-2: #b4b9c2; --ink-3: #7d838d;
    --line: #2b3038; --accent: #2dd4bf; --accent-soft: #123430; --hl: #16302d; --card: rgba(26, 29, 35, .96);
    --chip: #232830; --shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111317; --panel: #181b20; --panel-2: #1f2329; --ink: #eceef1; --ink-2: #b4b9c2; --ink-3: #7d838d;
  --line: #2b3038; --accent: #2dd4bf; --accent-soft: #123430; --hl: #16302d; --card: rgba(26, 29, 35, .96);
  --chip: #232830; --shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) 440px; height: 100%; }

/* ---------------- map ---------------- */
.mapwrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--sea-sat); outline: none; }
#map.base-line { background: var(--sea-line); }
.leaflet-container { font: inherit; }
.base-line .leaflet-tile-pane { transition: filter .3s; }
:root[data-theme="dark"] .base-line .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .base-line .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95); } }
:root[data-theme="dark"] #map.base-line { background: #2a3540; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #map.base-line { background: #2a3540; } }
.leaflet-control-attribution { background: rgba(255,255,255,.7) !important; font-size: 10.5px; color: #333; border-radius: 6px 0 0 0; }
.leaflet-control-attribution a { color: #234; }
.leaflet-bottom.leaflet-right { bottom: var(--player-h, 0px); }

.panel-float { background: var(--card); box-shadow: var(--shadow); border-radius: 12px; backdrop-filter: blur(8px); }
.topbar { position: absolute; top: 12px; right: 12px; z-index: 800; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--chip); }

.legend { position: absolute; top: 12px; left: 12px; z-index: 800; padding: 8px 10px; display: grid; grid-template-columns: auto auto; gap: 3px 14px; font-size: 12px; color: var(--ink-2); }
.legend .it { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend .sw { width: 20px; height: 4px; border-radius: 2px; }
.legend .sw.dash { background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 9px) !important; }
.legend.days .it .sw { width: 12px; height: 12px; border-radius: 3px; }
.legend button.min { grid-column: 1 / -1; border: 0; background: none; color: var(--ink-3); font-size: 11px; padding: 2px 0 0; text-align: left; }
.legend.collapsed > .it { display: none; }

.zoomctl { position: absolute; left: 12px; z-index: 800; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.zoomctl button { width: 34px; height: 34px; border: 0; background: var(--card); font-size: 18px; color: var(--ink); }
.zoomctl button + button { border-top: 1px solid var(--line); }
.zoomctl button:hover { background: var(--chip); }

/* stop markers */
.stopmk { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c, #0f766e); color: #1d2025;
  display: grid; place-items: center; font: 600 11px/1 var(--mono); box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .15s; }
.stopmk.guess { border-style: dashed; }
.stopmk.on { transform: scale(1.25); }
.stopmk.lodging { border-radius: 7px; }
.leaflet-marker-icon.dim { opacity: .35; }

/* moving dot */
.dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--c, #0f766e); box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.4); }
.dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--c, #0f766e); opacity: .0; animation: ping 1.8s infinite; }
.playing .dot::after { opacity: .6; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* photo thumbnails on the map (album mode) */
.ph-mk { width: 54px; height: 54px; border-radius: 9px; border: 2.5px solid var(--c, #fff); background: #ddd center/cover no-repeat;
  box-shadow: 0 2px 8px rgba(0,0,0,.45); position: relative; }
.ph-mk .n { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  background: #111; color: #fff; font: 600 11px/21px var(--mono); text-align: center; border: 2px solid #fff; }
.ph-mk .v { position: absolute; left: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); }
.ph-mk .v::after { content: ""; position: absolute; left: 6px; top: 4px; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.marker-cluster { background: none !important; }
.marker-cluster div { background: none !important; }

/* hover preview card */
.hovercard { position: absolute; z-index: 1200; pointer-events: none; width: 230px; border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.hovercard .im { width: 100%; aspect-ratio: 4 / 3; background: #222 center/cover no-repeat; position: relative; }
.hovercard .meta { padding: 7px 10px 9px; font-size: 12.5px; }
.hovercard .meta b { font: 600 13px var(--mono); }
.hovercard .meta .pl { color: var(--ink-2); }
.who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.who i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.vbadge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 6px; border-radius: 10px;
  background: rgba(0,0,0,.62); color: #fff; font: 600 11px var(--mono); }
.vbadge::before { content: ""; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }

/* ---------------- player ---------------- */
.player { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 900; padding: 10px 14px 8px; display: grid;
  grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; }
.player .play { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: var(--panel); display: grid; place-items: center; }
.player .play svg { width: 18px; height: 18px; }
.player .now { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.player .now .date { font-size: 12.5px; color: var(--ink-2); }
.player .now .clock { font: 600 22px/1.1 var(--mono); letter-spacing: -.5px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; background: var(--c, #6b7280); }
.badge.stay { background: var(--chip); color: var(--ink-2); }
.player .now .what { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 13.5px; }
.player .ctrls { display: flex; align-items: center; gap: 10px; grid-row: span 2; }
.player .speed { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.player .speed button { border: 0; background: transparent; padding: 4px 10px; font-size: 13px; color: var(--ink-2); }
.player .speed button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.player label.follow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.player label.follow input { accent-color: var(--accent); width: 16px; height: 16px; }
.scrub { position: relative; height: 30px; cursor: pointer; touch-action: none; }
.scrub .track { position: absolute; left: 0; right: 0; top: 7px; height: 6px; }
.scrub .dseg { position: absolute; top: 0; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.scrub .dseg .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.scrub .dseg.off { opacity: .35; }
.scrub .dlab { position: absolute; top: 15px; font: 600 10.5px var(--mono); color: var(--ink-3); transform: translateX(-1px); white-space: nowrap; }
.scrub .dlab.cur { color: var(--accent); }
.scrub .knob { position: absolute; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel); border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.scrub .ph { position: absolute; top: 7px; width: 2px; height: 6px; background: rgba(0,0,0,.18); pointer-events: none; }

/* popups during playback */
.pops { position: absolute; left: 12px; bottom: calc(var(--player-h, 80px) + 22px); z-index: 850; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.pop { pointer-events: auto; display: flex; gap: 10px; align-items: center; width: 250px; padding: 7px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
  animation: popin .35s cubic-bezier(.2,.9,.3,1.2); cursor: pointer; }
.pop .im { width: 72px; height: 60px; border-radius: 8px; background: #333 center/cover no-repeat; flex: none; position: relative; }
.pop .im .vbadge { left: 4px; bottom: 4px; padding: 1px 5px; font-size: 10px; }
.pop .tx { min-width: 0; font-size: 12.5px; line-height: 1.4; }
.pop .tx b { font: 600 13px var(--mono); }
.pop .tx .pl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop.old { opacity: .55; transform: scale(.96); transform-origin: left bottom; transition: all .3s; }
@keyframes popin { from { opacity: 0; transform: translateY(14px) scale(.92); } }

/* day transition card */
.daycard { position: absolute; inset: 0; z-index: 950; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .35s; }
.daycard.show { opacity: 1; }
.daycard .c { padding: 20px 34px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-align: center; transform: translateY(8px) scale(.97); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.daycard.show .c { transform: none; }
.daycard .k { font: 600 13px var(--mono); color: var(--accent); letter-spacing: .5px; }
.daycard .t { font-size: 26px; font-weight: 700; margin-top: 4px; }
.daycard .s { color: var(--ink-2); font-size: 14px; margin-top: 2px; }

/* ---------------- sidebar ---------------- */
.side { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side header { padding: 20px 22px 12px; border-bottom: 1px solid var(--line); }
.side .kicker { font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: .3px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side h1 { font-size: 26px; line-height: 1.2; margin: 6px 0 4px; letter-spacing: -.3px; }
.side .desc { color: var(--ink-2); font-size: 13.5px; margin: 0; }
.iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.iconbtn:hover { background: var(--chip); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.stat { background: var(--panel-2); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.stat b { display: block; font: 600 16px/1.2 var(--mono); white-space: nowrap; }
.stat span { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.stat span i { width: 10px; height: 3px; border-radius: 2px; background: var(--c); }
.filters { padding: 10px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 3px 10px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.chip small { font-family: var(--mono); color: var(--ink-3); font-size: 11px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .7; }
.chip.person i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.chip.person[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.chip.person[aria-pressed="true"] { background: var(--panel); color: var(--ink); border-color: var(--c); }
.flabel { font-size: 11.5px; color: var(--ink-3); margin-right: 2px; align-self: center; }

.list { flex: 1; overflow-y: auto; padding: 4px 0 40px; scroll-behavior: auto; overscroll-behavior: contain; }
.day { padding: 14px 22px 4px; }
.day + .day { border-top: 1px solid var(--line); }
.day .dh { font: 600 12.5px var(--mono); color: var(--accent); display: flex; gap: 8px; align-items: center; }
.day .dh .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.day h2 { font-size: 20px; margin: 4px 0 2px; letter-spacing: -.2px; }
.day .sum { color: var(--ink-2); font-size: 13px; margin: 0 0 8px; }
.day .dstats { font: 12px var(--mono); color: var(--ink-3); margin-bottom: 6px; }
.ev { position: relative; display: grid; grid-template-columns: 50px 26px 1fr; gap: 0 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; }
.ev:hover { background: var(--panel-2); }
.ev.cur { background: var(--hl); }
.ev .tm { font: 500 12.5px/24px var(--mono); color: var(--ink-3); text-align: right; }
.ev .tm small { display: block; font-size: 10.5px; line-height: 1; }
.ev .rail { position: relative; display: flex; justify-content: center; }
.ev .rail::before { content: ""; position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--rc, var(--line)); border-radius: 2px; }
.ev.stay .rail::before { background: var(--line); width: 2px; }
.ev.move.guess .rail::before { background: repeating-linear-gradient(180deg, var(--rc) 0 5px, transparent 5px 9px); }
.ev .num { position: relative; z-index: 1; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--c, var(--accent)); display: grid; place-items: center; font: 600 11px var(--mono); }
.ev .num.lodging { border-radius: 7px; }
.ev .num.guess { border-style: dashed; }
.ev .mico { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 7px; background: var(--c); display: grid; place-items: center; color: #fff; margin-top: 1px; }
.ev .mico svg { width: 15px; height: 15px; }
.ev .body { min-width: 0; }
.ev .nm { font-weight: 650; font-size: 15px; line-height: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ev .orig { color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.ev .note { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.ev.move .ln { font-size: 13px; color: var(--ink-2); line-height: 1.5; padding-top: 2px; }
.ev.move .ln b { font: 600 13px var(--mono); color: var(--ink); }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 11px; line-height: 18px; color: var(--ink-3); font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.tag.t-track { border-color: #34d399; color: #059669; }
.tag.t-photo { border-color: #93c5fd; color: #2563eb; }
.tag.t-table { border-color: #c4b5fd; color: #7c3aed; }
.tag.t-road { border-color: #fcd34d; color: #b45309; }
.tag.t-guess { border-style: dashed; }
.strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 4px; }
.th { width: 62px; height: 62px; border-radius: 8px; background: var(--chip) center/cover no-repeat; position: relative; border: 0; padding: 0; flex: none; outline-offset: 2px; }
.th::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
.th .vbadge { left: 3px; bottom: 3px; padding: 0 5px 0 4px; font-size: 9.5px; gap: 2px; }
.th .vbadge::before { border-left-width: 5px; border-top-width: 3.5px; border-bottom-width: 3.5px; }
.th:hover { filter: brightness(1.08); }
.th.more { display: grid; place-items: center; font: 600 13px var(--mono); color: var(--ink-2); background: var(--panel-2); }
.th.more::after { display: none; }

.foot { padding: 18px 22px 30px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.foot h3 { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
.foot table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.foot th, .foot td { text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.foot th:first-child, .foot td:first-child { text-align: left; }
.foot th { color: var(--ink-3); font-weight: 500; font-family: var(--sans); }
.foot td { color: var(--ink-2); }
.foot p { margin: 8px 0 0; line-height: 1.6; }

/* ---------------- viewer ---------------- */
.viewer { position: fixed; inset: 0; z-index: 3000; background: rgba(8, 10, 14, .94); display: none; color: #eee; }
.viewer.open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.viewer .vh { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13.5px; }
.viewer .vh .t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .vh b { font: 600 15px var(--mono); margin-right: 8px; }
.viewer .vh a, .viewer .vh button { color: #eee; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); border-radius: 8px; padding: 5px 11px; text-decoration: none; font-size: 13px; white-space: nowrap; }
.viewer .vh a:hover, .viewer .vh button:hover { background: rgba(255,255,255,.14); }
.viewer .stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
/* the stage is a fixed box; the original (often 4000 px tall) is scaled to fit inside it */
.viewer .stage img, .viewer .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.viewer .stage .ph { position: absolute; inset: 0; background: center/contain no-repeat; filter: blur(0); opacity: .9; }
.viewer .stage .loading { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #bbb; }
.viewer .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 26px; border-radius: 10px; z-index: 2; }
.viewer .nav:hover { background: rgba(255,255,255,.18); }
.viewer .nav.p { left: 12px; } .viewer .nav.n { right: 12px; }
.viewer .fallback { position: relative; z-index: 3; max-width: 420px; text-align: center; padding: 22px; background: rgba(20,22,28,.9); border-radius: 14px; line-height: 1.6; }
.viewer .fallback a { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 9px; background: #2dd4bf; color: #062; font-weight: 600; text-decoration: none; }
.viewer .vf { padding: 8px 16px 14px; text-align: center; font-size: 12px; color: #aaa; }

/* the moving dot while the camera follows: fixed at the centre of the view */
.fdot { position: absolute; z-index: 700; display: none; pointer-events: none; transform: translate(-50%, -50%); width: 22px; height: 22px; }
.fdot .dot { position: relative; }

/* photo-dot canvas fades out during an animated zoom instead of being stretched */
.leaflet-photo-pane { transition: opacity .12s; }
.leaflet-photo-pane.zooming { opacity: 0; transition: none; }

/* overview button + day buttons */
.ovbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; }
.ovbtn svg { width: 18px; height: 18px; flex: none; }
.ovbtn small { margin-left: auto; font: 500 11.5px var(--mono); color: var(--ink-3); }
.ovbtn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.ovbtn[aria-pressed="true"] small { color: inherit; opacity: .7; }
.days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); min-width: 0; }
.dbtn b { font: 600 12.5px/1.1 var(--mono); }
.dbtn small { font: 500 10px/1.1 var(--mono); color: var(--ink-3); }
.dbtn::before { content: ""; position: absolute; left: 50%; top: 3px; width: 14px; height: 2px; margin-left: -7px; border-radius: 1px; background: var(--c); opacity: .9; }
.dbtn:hover { background: var(--chip); }
.dbtn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.dbtn[aria-pressed="true"] small { color: inherit; opacity: .7; }

/* player: day arrows around the one-day scrubber */
.player .scrubrow { grid-column: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.player .scrubrow .scrub { flex: 1; min-width: 0; }
.darrow { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; }
.darrow:hover:not(:disabled) { background: var(--chip); }
.darrow:disabled { opacity: .3; cursor: default; }
.ovhint { display: none; flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.overview .player .scrub { display: none; }
body.overview .ovhint { display: block; }
body.overview .player .ctrls { display: none; }

/* ---------------- start-up download ---------------- */
.loader { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: var(--bg); transition: opacity .4s; }
.loader.done { opacity: 0; pointer-events: none; }
.loader .lc { width: min(420px, calc(100vw - 48px)); }
.loader .lk { font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: .3px; }
.loader .lt { font-size: 28px; font-weight: 700; margin: 6px 0 18px; letter-spacing: -.3px; }
.loader .ls { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.loader .lbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.loader .lbar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .2s; }
.loader .ln { font: 12.5px var(--mono); color: var(--ink-3); margin-top: 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.loader .lcred { margin-top: 26px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.loader .lcred a { color: inherit; }
.loader button { margin-top: 14px; border: 0; border-radius: 9px; padding: 8px 18px; background: var(--ink); color: var(--panel); font-weight: 600; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; min-height: 100dvh; }
  .mapwrap { height: 62vh; height: 62dvh; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .list { overflow: visible; }
  .side header { padding: 16px 16px 10px; }
  .filters, .day, .foot { padding-left: 16px; padding-right: 16px; }
  .side h1 { font-size: 22px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .legend { top: 92px; left: 8px; grid-template-columns: auto; font-size: 11px; padding: 6px 8px; max-width: 46vw; }
  .leaflet-control-attribution { font-size: 9px; max-width: 70vw; line-height: 1.3; }
  .topbar { top: 8px; right: 8px; gap: 6px; }
  .seg button { padding: 5px 9px; font-size: 12px; }
  .zoomctl { left: 8px; top: 8px !important; }
  .player { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 4px; grid-template-columns: auto 1fr; gap: 2px 10px; }
  .player .play { width: 40px; height: 40px; grid-row: span 1; }
  .player .now .clock { font-size: 18px; }
  .player .now .what { font-size: 12.5px; }
  .player .ctrls { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; order: 3; }
  .player .scrubrow { grid-column: 1 / -1; order: 2; }
  .days { gap: 3px; }
  .dbtn small { font-size: 9px; }
  .pops { left: 8px; }
  .pop { width: 210px; }
  .pop .im { width: 58px; height: 50px; }
  .hovercard { display: none; }
  .daycard .t { font-size: 21px; }
  .viewer .vh { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .viewer .vh .t { flex-basis: 100%; }
  .viewer .vh a, .viewer .vh button { flex: 1; text-align: center; }
  .viewer .nav { width: 38px; height: 54px; }
  .viewer .vf { overflow-wrap: anywhere; }
}

/* fractional zoom leaves hairline gaps between tiles: overlap them by a pixel */
.leaflet-tile-container canvas.leaflet-tile { width: 257px !important; height: 257px !important; }

/* artifact: original files open through real links */
a.th, a.pop { text-decoration: none; color: inherit; }
.mpop .leaflet-popup-content { margin: 8px; width: 220px !important; font: 12.5px/1.45 var(--sans); }
.mpop .leaflet-popup-content-wrapper, .mpop .leaflet-popup-tip { background: var(--card); color: var(--ink); }
.mpop .im { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: #222 center/cover no-repeat; position: relative; }
.mpop .go { display: block; margin-top: 7px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--panel) !important; text-align: center; text-decoration: none; font-weight: 600; }