/* Trail Explorer v2 (2.20.0): full-viewport map, time scrubber, drawers. */

.tx-page { background: #FAF8F5; }

/* Header band */
.tx-head { padding: 2.25rem 0 1.5rem; background: #FAF8F5; }
.tx-head h1 {
	font-family: 'Playfair Display', Georgia, serif;
	color: #2C1810;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	margin: 0 0 0.4rem;
}
.tx-sub { color: #5a3a20; max-width: 62ch; margin: 0 0 0.9rem; font-size: 0.98rem; }
.tx-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.85rem; color: #8B7355; }
.tx-stats strong { color: #8B6914; font-size: 1rem; }

/* Map shell */
.tx-map-wrap { position: relative; height: min(86vh, 900px); min-height: 540px; }
#tx-map { position: absolute; inset: 0; }
.tx-map-loading {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: #EDE7DC; color: #5a3a20; font-size: 0.95rem; z-index: 5; pointer-events: none;
	transition: opacity 0.4s;
}
.tx-map-loading.is-done { opacity: 0; }

/* Floating chrome shared */
.tx-legend, .tx-layers-panel, .tx-scrub, .tx-drawer {
	background: rgba(250, 248, 245, 0.96);
	border: 1px solid rgba(44, 24, 16, 0.12);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(44, 24, 16, 0.18);
	backdrop-filter: blur(6px);
}

/* Legend */
.tx-legend { position: absolute; top: 12px; right: 12px; z-index: 6; max-width: 240px; overflow: hidden; }
.tx-legend-toggle {
	display: flex; align-items: center; gap: 0.5rem; width: 100%;
	background: none; border: 0; cursor: pointer; padding: 0.55rem 0.9rem;
	font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: #2C1810;
}
.tx-legend-body { max-height: 40vh; overflow-y: auto; padding: 0 0.9rem 0.7rem; }
.tx-legend-row {
	display: flex; align-items: center; gap: 0.5rem; width: 100%;
	background: none; border: 0; cursor: pointer; text-align: left;
	padding: 0.22rem 0; font-size: 0.8rem; color: #3D2E1F;
}
.tx-legend-row:hover { color: #8B6914; }
.tx-legend-swatch { width: 14px; height: 4px; border-radius: 2px; flex: 0 0 auto; }

/* Layers */
.tx-layers { position: absolute; bottom: 96px; left: 12px; z-index: 6; }
.tx-layers-toggle {
	background: rgba(250, 248, 245, 0.96); color: #2C1810;
	border: 1px solid rgba(44, 24, 16, 0.12); border-radius: 8px;
	padding: 0.5rem 0.85rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
	box-shadow: 0 4px 16px rgba(44, 24, 16, 0.16);
}
.tx-layers-panel { position: absolute; bottom: 44px; left: 0; width: 250px; padding: 0.8rem 1rem; }
.tx-layer-group h4 {
	font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: #8B7355; margin: 0.6rem 0 0.25rem;
}
.tx-layer-group:first-child h4 { margin-top: 0; }
.tx-layer-group label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: #3D2E1F; padding: 0.14rem 0; cursor: pointer; }
.tx-layer-group input { accent-color: #8B6914; }

/* Scrubber */
.tx-scrub {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
	z-index: 7; width: min(680px, calc(100% - 24px));
	display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.95rem;
}
.tx-play {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
	border: 0; cursor: pointer; background: #8B6914; color: #FAF8F5; font-size: 1.15rem;
	display: flex; align-items: center; justify-content: center; margin-top: 0.15rem;
	transition: background 0.2s, transform 0.2s;
}
.tx-play:hover { background: #a67c1a; transform: scale(1.05); }
.tx-scrub-main { flex: 1; min-width: 0; }
.tx-scrub-read { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.tx-scrub-date { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #2C1810; font-size: 1rem; white-space: nowrap; }
.tx-scrub-place { font-size: 0.78rem; color: #5a3a20; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-scrub-place a { color: #b87333; text-decoration: none; font-weight: 600; }
.tx-scrub-place a:hover { text-decoration: underline; }
#tx-slider { width: 100%; margin: 0.35rem 0 0.2rem; accent-color: #8B6914; }
.tx-milestones { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.tx-milestones-label { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8B7355; margin-right: 0.15rem; }
.tx-milestones button {
	border: 1px solid rgba(139, 105, 20, 0.35); background: none; border-radius: 999px;
	color: #8B6914; font-size: 0.68rem; font-weight: 600; padding: 0.14rem 0.55rem; cursor: pointer;
}
.tx-milestones button:hover, .tx-milestones button.is-active { background: #8B6914; color: #FAF8F5; }

/* Drawer */
.tx-drawer {
	position: absolute; top: 12px; right: 12px; bottom: 90px; z-index: 8;
	width: min(400px, calc(100% - 24px));
	display: flex; flex-direction: column;
}
.tx-drawer-close {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(44, 24, 16, 0.08); color: #2C1810;
	display: flex; align-items: center; justify-content: center;
}
.tx-drawer-close:hover { background: rgba(44, 24, 16, 0.16); }
.tx-drawer-body { overflow-y: auto; padding: 1.1rem 1.2rem; }
.tx-drawer-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #b87333; margin: 0 0 0.3rem; }
.tx-drawer h3 { font-family: 'Playfair Display', Georgia, serif; color: #2C1810; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.35rem; padding-right: 2rem; }
.tx-drawer-meta { font-size: 0.8rem; color: #5a3a20; margin: 0 0 0.8rem; }
.tx-drawer-img { width: 100%; border-radius: 8px; display: block; margin: 0 0 0.75rem; aspect-ratio: 16/9; object-fit: cover; background: #E8DFD0; }
.tx-drawer-note { font-size: 0.76rem; color: #8B7355; font-style: italic; margin: 0.4rem 0 0.8rem; }

.tx-360-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: #8B6914; color: #FAF8F5; border: 0; border-radius: 8px;
	padding: 0.55rem 1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer;
	text-decoration: none; margin: 0 0.5rem 0.75rem 0;
}
.tx-360-btn:hover { background: #a67c1a; color: #FAF8F5; }
.tx-360-btn.is-ghost { background: none; color: #8B6914; border: 1px solid rgba(139, 105, 20, 0.4); }
.tx-360-btn.is-ghost:hover { background: rgba(139, 105, 20, 0.08); }

.tx-drawer-strip { display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.1rem 0 0.6rem; }
.tx-drawer-strip button { flex: 0 0 auto; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; background: none; cursor: pointer; }
.tx-drawer-strip button:hover, .tx-drawer-strip button.is-active { border-color: #c9a227; }
.tx-drawer-strip img { width: 76px; height: 76px; object-fit: cover; display: block; }

.tx-drawer-list { margin: 0.4rem 0 0.9rem; }
.tx-drawer-list h4 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8B7355; margin: 0 0 0.35rem; }
.tx-drawer-list a {
	display: block; padding: 0.35rem 0; border-bottom: 1px solid rgba(44, 24, 16, 0.08);
	color: #2C1810; text-decoration: none; font-size: 0.85rem; line-height: 1.35;
}
.tx-drawer-list a:hover { color: #b87333; }
.tx-drawer-list a span { display: block; font-size: 0.72rem; color: #8B7355; }
.tx-showall {
	background: none; border: 0; color: #8B6914; font-weight: 600; font-size: 0.8rem;
	cursor: pointer; padding: 0.4rem 0 0;
}
.tx-showall:hover { text-decoration: underline; }

/* Viewer modal */
.tx-viewer-modal {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(24, 14, 8, 0.92);
	display: flex; align-items: center; justify-content: center;
}
.tx-viewer-inner { width: 92vw; height: 86vh; background: #000; border-radius: 10px; overflow: hidden; position: relative; }
.tx-viewer-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tx-viewer-close {
	position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.2rem;
	display: flex; align-items: center; justify-content: center;
}
.tx-viewer-close:hover { background: rgba(0, 0, 0, 0.85); }

/* Map popup */
.tx-popup .mapboxgl-popup-content {
	background: #FAF8F5; color: #2C1810; border-radius: 8px;
	padding: 0.55rem 0.8rem; font-size: 0.8rem; box-shadow: 0 4px 16px rgba(44, 24, 16, 0.25);
}
.tx-popup .mapboxgl-popup-tip { border-top-color: #FAF8F5; }
.tx-popup strong { display: block; font-size: 0.85rem; }
.tx-popup em { color: #8B7355; font-style: normal; }

/* Chronological ledger */
.tx-chrono { padding: 2.75rem 0 3.5rem; }
.tx-chrono h2 { font-family: 'Playfair Display', Georgia, serif; color: #2C1810; font-size: 1.7rem; margin: 0 0 0.3rem; }
.tx-chrono-sub { color: #5a3a20; font-size: 0.9rem; margin: 0 0 1rem; }

.tx-ledger-bar {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	margin: 0 0 0.4rem; font-size: 0.8rem; color: #8B7355;
}
.tx-ledger-bar a { color: #8B6914; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; }
.tx-ledger-bar a:hover { text-decoration: underline; }
.tx-ledger-bar label { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; cursor: pointer; color: #5a3a20; }
.tx-ledger-bar input { accent-color: #8B6914; }

.tx-ledger { border-top: 1px solid rgba(44, 24, 16, 0.2); }
.tx-ledger-year {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.4rem; font-weight: 700; color: rgba(44, 24, 16, 0.2);
	letter-spacing: 0.06em; padding: 1.5rem 0 0.35rem;
	border-bottom: 1px solid rgba(44, 24, 16, 0.12);
	scroll-margin-top: 90px;
}
.tx-row {
	display: flex; align-items: baseline; gap: 0.9rem;
	padding: 0.45rem 0.4rem; text-decoration: none;
	border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}
.tx-row:hover { background: rgba(139, 105, 20, 0.07); }
.tx-row-thumb {
	flex: 0 0 46px;
	width: 46px; height: 46px;
	border-radius: 6px;
	object-fit: cover;
	align-self: center;
	border: 1px solid rgba(44, 24, 16, 0.12);
	transition: transform 0.2s;
}
.tx-row:hover img.tx-row-thumb { transform: scale(1.06); }
.tx-row-thumb.is-empty {
	display: flex; align-items: center; justify-content: center;
	background: rgba(44, 24, 16, 0.05);
	color: rgba(44, 24, 16, 0.3);
	font-size: 1rem;
}
.tx-row.is-hidden { display: none; }
.tx-row-date {
	flex: 0 0 158px; font-size: 0.7rem; letter-spacing: 0.06em;
	text-transform: uppercase; color: #8B7355; font-variant-numeric: tabular-nums;
}
.tx-row-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #2C1810; font-size: 1.02rem; line-height: 1.3; }
.tx-row:hover .tx-row-name { color: #8B6914; }
.tx-row-lead { flex: 1; min-width: 2rem; border-bottom: 1px dotted rgba(44, 24, 16, 0.3); transform: translateY(-4px); }
.tx-row-meta { font-size: 0.76rem; color: #5a3a20; white-space: nowrap; }
.tx-row-mark {
	flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%;
	border: 1.5px solid rgba(44, 24, 16, 0.3); align-self: center;
}
.tx-row-mark.is-360 { background: #c9a227; border-color: #2C1810; }
.tx-row-pop {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: rgba(184, 67, 31, 0.1);
	color: #b8431f;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
}

/* Most-explored band (places archive) */
.tx-popband { padding: 0.5rem 0 1.25rem; }
.tx-popband h2 { font-family: 'Playfair Display', Georgia, serif; color: #2C1810; font-size: 1.45rem; margin: 0 0 0.25rem; }
.tx-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 0.8rem; }
.tx-pop-card { display: block; text-decoration: none; }
.tx-pop-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	border: 1px solid rgba(44, 24, 16, 0.15);
	transition: transform 0.2s, box-shadow 0.2s;
}
.tx-pop-card:hover img { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44, 24, 16, 0.18); }
.tx-pop-name { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #2C1810; font-size: 0.98rem; line-height: 1.25; margin: 0.5rem 0 0.1rem; }
.tx-pop-card:hover .tx-pop-name { color: #8B6914; }
.tx-pop-meta { display: block; font-size: 0.75rem; color: #5a3a20; }

@media (max-width: 720px) {
	.tx-map-wrap { height: 78vh; min-height: 480px; }
	.tx-drawer { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: 62vh; border-radius: 14px 14px 0 0; }
	.tx-scrub { bottom: 8px; width: calc(100% - 16px); padding: 0.55rem 0.7rem; }
	.tx-milestones { display: none; }
	.tx-layers { bottom: 118px; }
	.tx-legend { max-width: 190px; }
	.tx-legend-body { max-height: 26vh; }
	.tx-viewer-inner { width: 100vw; height: 100vh; border-radius: 0; }
	.tx-row { flex-wrap: wrap; gap: 0.15rem 0.6rem; padding: 0.55rem 0.2rem; }
	.tx-row-thumb { flex-basis: 40px; width: 40px; height: 40px; }
	.tx-row-date { flex: 1 1 auto; }
	.tx-row-lead { display: none; }
	.tx-row-meta { white-space: normal; }
	.tx-ledger-bar label { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.tx-play { transition: none; }
}