/* The trip map (src/app/map/TripMap.tsx): MapLibre on the globe; its own stylesheet comes with the library
   (dist/maplibre/maplibre-gl.css, loaded when a map opens). Approved prototype: docs/mockups/2026-10-06-harita-maplibre-v1. */
.tm { position: relative; margin: 0; overflow: hidden; background: #0b1020; }
/* Over maplibre-gl.css's .maplibregl-map { position: relative }. */
.tm > .tm-canvas { position: absolute; inset: 0; }
.tm.tm-generate { animation: st-map-in .5s ease-out both; background: radial-gradient(circle at 50% 40%, #f4f0ff 0%, #e3dcff 100%); }
/* The photos come under the real map, over its bottom edge only (the landing and the arc stay in view). */
.st-gen-stage .tm-generate + .st-photos { margin-top: -16px; height: 214px; }
.tm-tab { margin: 0 0 24px; }
.tm-board { height: min(640px, 72vh); min-height: 380px; border-radius: 22px; box-shadow: 0 16px 40px rgba(40, 20, 120, .16); }
.tm-note { margin: 24px auto; max-width: 560px; text-align: center; color: var(--hx-muted); font-size: 15px; }
.tm-retry { margin-top: 10px; border: 1px solid var(--hx-line, #ddd); background: #fff; border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; color: var(--hx-ink); cursor: pointer; }
.tm-missing { margin: 10px 4px 0; color: var(--hx-muted); font-size: 13.5px; }
.tm-missing-list { display: block; font-size: 12.5px; opacity: .85; }

/* A stop: its name over its photo, the nights on a badge. */
.tm-stop { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; font-family: inherit; }
.tm-board .tm-stop { cursor: pointer; }
.tm-stop:focus-visible { outline: none; }
.tm-stop:focus-visible .tm-ph { box-shadow: 0 0 0 3px var(--hx-accent), 0 4px 14px rgba(0, 0, 0, .3); }
.tm-name { background: #fff; color: #1d1d1f; border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.tm-ph { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); background: linear-gradient(135deg, #8f7cff, #4a3bb8); display: grid; place-items: center; }
.tm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.tm-ph img.in { opacity: 1; }
.tm-initial { color: #fff; font-weight: 800; font-size: 22px; }
.tm-n { position: absolute; top: -5px; right: -7px; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; border-radius: 12px; background: #fff; color: #1d1d1f; font-weight: 800; font-size: 13px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); z-index: 1; }
/* A stop right next to a bigger one: a small pin, its name beside it. */
.tm-stop.tm-near { flex-direction: row-reverse; gap: 4px; }
.tm-stop.tm-near .tm-ph { width: 14px; height: 14px; border-width: 2px; }
.tm-stop.tm-near .tm-ph > :not(img) { display: none; }
.tm-stop.tm-near .tm-name { font-size: 12px; padding: 2px 7px; }
.tm-dur.tm-short { display: none; }
.tm-stop.tm-in { animation: tm-in .45s ease-out backwards; }
.tm-stop.tm-in > * { animation: tm-rise .45s ease-out both; }
.tm-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #fff; color: #1d1d1f; border-radius: 12px; padding: 9px 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); display: grid; gap: 2px; white-space: nowrap; font-size: 13.5px; text-align: left; z-index: 3; }
.tm-pop strong { font-size: 15px; }
.tm-pop-nights { color: #6b6790; }

/* Home and the journeys' pills. */
.tm-home { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1d1d1f; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); font-size: 19px; line-height: 1; }
.tm-dur { display: flex; align-items: center; gap: 6px; background: #fff; color: #1d1d1f; border-radius: 10px; padding: 4px 9px; font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.tm-dur:not(.booked) { color: #4a4766; }
.tm-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tm-plane { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); pointer-events: none; }
.tm-plane-svg { width: 30px; height: 30px; fill: #fff; stroke: #221b3a; stroke-width: .9; }
.tm-pulse { width: 22px; height: 22px; border-radius: 50%; background: var(--hx-accent, #5b45e0); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none; }
.tm-pulse.go::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--hx-accent, #5b45e0); animation: st-map-ring 1.5s ease-out 2 both; }

.tm-play { position: absolute; left: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #c9b8ff; color: #1d1d1f; font-size: 19px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer; z-index: 2; }
.tm-play:hover { background: #d8cbff; }
.tm-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tm .maplibregl-ctrl-attrib { font-size: 11px; }

/* Never a transform on a marker itself: MapLibre places it with one. The stop fades in, its parts rise. */
@keyframes tm-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tm-rise { from { transform: translateY(6px) scale(.92); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tm.tm-generate, .tm-stop.tm-in, .tm-stop.tm-in > *, .tm-pulse.go::after { animation: none; } .tm-ph img { transition: none; } }
@media (max-width: 720px) { .tm-board { height: 64vh; border-radius: 16px; } .tm-ph { width: 52px; height: 52px; } .tm-name { font-size: 13px; } }
.tm-plane { z-index: 5; }