/* FixOps Trails front end. Dark theme, accent #2DD9A8, matches fixops.pro. */
.fx-trail,
.fx-trails,
.fx-trail-stats {
	--fx-bg: #0d1420;
	--fx-card: #121b2a;
	--fx-line: rgba(255, 255, 255, 0.1);
	--fx-text: #e8eef7;
	--fx-muted: #8a97ab;
	--fx-accent: #2DD9A8;
	margin: 2rem 0;
	color: var(--fx-text);
}
.fx-trail__map {
	width: 100%;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--fx-bg);
}
.fx-trail__profile {
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	background: var(--fx-card);
}
.fx-trail__profile svg { display: block; touch-action: none; cursor: crosshair; }
.fx-trail__profile .fx-axis { fill: var(--fx-muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.fx-trail__profile .fx-tip { fill: var(--fx-text); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }

.fx-trail__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
}
.fx-trail__stat {
	padding: 0.75rem 1rem;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	background: var(--fx-card);
}
.fx-trail__stat dt { margin: 0; color: var(--fx-muted); font-size: 0.8rem; }
.fx-trail__stat dd { margin: 0.15rem 0 0; font: 600 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.fx-trail[data-status="planned"] .fx-trail__map { border-style: dashed; border-color: var(--fx-accent); }

.fx-pin {
	width: 14px;
	height: 14px;
	border: 2px solid #0b1220;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
}
.fx-pin--start { background: var(--fx-accent, #2DD9A8); }
.fx-pin--finish { background: #FF4B3A; }
.fx-hover {
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #F5A524;
	pointer-events: none;
}

.fx-photo {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #0b1220 center / cover no-repeat;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.fx-photo:hover, .fx-photo:focus-visible { border-color: var(--fx-accent, #2DD9A8); outline: none; }
.fx-popup__link { display: block; line-height: 0; }
.fx-popup__img { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 6px; }
.maplibregl-popup-content { padding: 6px; border-radius: 10px; }

.fx-trail__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.fx-trail__gallery li { margin: 0; }
.fx-trail__gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--fx-line);
	border-radius: 10px;
}

.fx-trails { --fx-line: rgba(255, 255, 255, 0.1); margin: 2rem 0; }
.fx-trails__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.fx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--fx-line);
	border-radius: 999px;
	background: #121b2a;
	color: #e8eef7;
	font: 600 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace;
	cursor: pointer;
}
.fx-chip[aria-pressed="false"] { opacity: 0.4; }
.fx-chip__dot { width: 10px; height: 10px; border-radius: 50%; }
.fx-popup__title { display: block; font-weight: 700; color: #0b1220; text-decoration: none; }
.fx-popup__title:hover { text-decoration: underline; }
.fx-popup__meta { margin-top: 0.2rem; color: #4a5568; font-size: 0.85rem; }

.fx-trail-stats { margin: 2rem 0; color: #e8eef7; }
.fx-trail__stat-link { display: block; margin-top: 0.25rem; color: #2DD9A8; font-size: 0.8rem; text-decoration: none; }
.fx-trail-stats__chart {
	margin-top: 0.75rem;
	padding: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: #121b2a;
}
.fx-trail-stats__chart .fx-axis { fill: #8a97ab; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.fx-trail-stats__years {
	width: 100%;
	margin-top: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #121b2a;
}
.fx-trail-stats__years th, .fx-trail-stats__years td { padding: 0.55rem 0.9rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; background: transparent; }
.fx-trail-stats__years tbody tr:last-child td { border-bottom: 0; }
.fx-trail-stats__years th { color: #8a97ab; font-weight: 600; font-size: 0.8rem; }
.fx-trail-stats__years td { color: #e8eef7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.fx-trail__more { margin: 1rem 0 0; }
.fx-trail__more a { color: var(--fx-accent, #2DD9A8); font-weight: 600; text-decoration: none; }
.fx-trail__more a:hover { text-decoration: underline; }

.fx-fly { display: flex; flex-direction: column; overflow: hidden; }
.fx-fly .fx-fly__btn {
	width: auto;
	min-width: 29px;
	padding: 0 0.6rem;
	font: 600 12px/29px system-ui, sans-serif;
	color: #111;
}
.fx-fly .fx-fly__btn[aria-pressed="true"] { background: var(--fx-accent, #2DD9A8); }

.fx-layers { display: flex; overflow: hidden; }
.fx-layers .fx-layers__btn {
	width: auto;
	padding: 0 0.7rem;
	font: 600 12px/29px system-ui, sans-serif;
	color: #111;
}
.fx-layers .fx-layers__btn[aria-pressed="true"] { background: var(--fx-accent, #2DD9A8); }
.fx-trail-empty { color: #8a97ab; font-style: italic; }

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

/* The card that links to the original track (Wikiloc) */
.fx-trail__stat--source dd a { color: var(--fx-accent, #2DD9A8); font-weight: 700; text-decoration: none; }
.fx-trail__stat--source dd a:hover, .fx-trail__stat--source dd a:focus-visible { text-decoration: underline; }