/* --- maps slide: trips sidebar (bead onfiremobile-iw8fk, map-trips.js) -------
   A dark glass panel on the right, the same material as the bottom-left map
   card (.ns-map-card) so the two read as one family. It lives directly in
   #presentation-screen, NOT in .ns-root: the map slide re-renders .ns-root on
   every 15 s data refresh and would wipe the panel with it.
   Stacking: above .ns-root (20) and the map host (15), below the chrome
   footer (100) and the slide drawer (120), so the deck's own controls stay
   reachable. Kiosk-sized targets: every tappable row is >= 64 px tall. */

.ns-trips {
    --ns-trips-bg: rgba(8, 8, 12, 0.86);
    --ns-trips-line: rgba(255, 255, 255, 0.12);
    --ns-trips-card: rgba(255, 255, 255, 0.06);
    --ns-trips-card-on: rgba(255, 107, 31, 0.2);
    --ns-trips-text: #ffffff;
    --ns-trips-text-2: rgba(255, 255, 255, 0.66);
    --ns-trips-accent: #FF6B1F;
    --ns-trips-out: #2D71EC;
    --ns-trips-back: #7C4DFF;
    --ns-trips-w: clamp(320px, 34vw, 520px);
    position: fixed;
    top: clamp(12px, 2vmin, 28px);
    right: clamp(12px, 2vmin, 28px);
    bottom: clamp(12px, 2vmin, 28px);
    width: var(--ns-trips-w);
    max-width: calc(100vw - 24px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--ns-trips-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--ns-trips-line);
    border-radius: clamp(20px, 3vmin, 34px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    color: var(--ns-trips-text);
    overflow: hidden;
    /* Closed: off to the right. The open transition is a spring-ish ease-out
       (easeOutQuint-like), never linear; closing is a quicker ease-in. */
    transform: translateX(calc(100% + 40px));
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.55, 0, 0.9, 0.35), opacity 220ms ease-in;
    pointer-events: none;
}
.ns-trips.ns-trips-open {
    transform: translateX(0);
    opacity: 1;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease-out;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .ns-trips, .ns-trips.ns-trips-open { transition: opacity 160ms ease-out; transform: none; }
}

.ns-trips-head {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vmin, 20px);
    padding: clamp(14px, 2vmin, 24px) clamp(14px, 2vmin, 24px) clamp(12px, 1.6vmin, 18px);
    border-bottom: 1px solid var(--ns-trips-line);
    flex: 0 0 auto;
}
.ns-trips-avatar {
    width: clamp(48px, 6vmin, 72px);
    height: clamp(48px, 6vmin, 72px);
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: clamp(16px, 2.2vmin, 26px);
}
.ns-trips-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-trips-who { min-width: 0; flex: 1 1 auto; }
.ns-trips-name {
    font-size: clamp(18px, 2.4vmin, 30px);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ns-trips-sub { font-size: clamp(13px, 1.6vmin, 19px); color: var(--ns-trips-text-2); margin-top: 2px; }
.ns-trips-close {
    width: clamp(56px, 7vmin, 72px);
    height: clamp(56px, 7vmin, 72px);
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ns-trips-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease-out, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ns-trips-close:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.18); }
.ns-trips-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 31, 0.6); }
.ns-trips-close svg {
    width: 44%; height: 44%;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
}

.ns-trips-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(6px, 1vmin, 12px) clamp(12px, 1.6vmin, 20px) clamp(18px, 2.4vmin, 28px);
}

.ns-trips-still {
    margin: clamp(8px, 1.2vmin, 14px) 0 0;
    padding: clamp(12px, 1.6vmin, 18px) clamp(16px, 2vmin, 24px);
    border-radius: 999px;
    background: rgba(45, 113, 236, 0.2);
    color: #cfe0ff;
    font-weight: 600;
    font-size: clamp(14px, 1.8vmin, 21px);
}

.ns-trips-date {
    padding: clamp(16px, 2.2vmin, 26px) clamp(4px, 0.6vmin, 8px) clamp(6px, 0.9vmin, 10px);
    font-size: clamp(14px, 1.8vmin, 21px);
    font-weight: 600;
    color: var(--ns-trips-text-2);
}

.ns-trips-card {
    display: block;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: clamp(14px, 1.9vmin, 22px) clamp(16px, 2.2vmin, 26px);
    border: 1px solid var(--ns-trips-line);
    border-radius: clamp(18px, 2.4vmin, 28px);
    background: var(--ns-trips-card);
    color: var(--ns-trips-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease-out, border-color 140ms ease-out,
                transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ns-trips-card:active { transform: scale(0.985); }
.ns-trips-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 31, 0.55); }
.ns-trips-card-on { background: var(--ns-trips-card-on); border-color: rgba(255, 107, 31, 0.6); }
.ns-trips-title {
    font-size: clamp(16px, 2.1vmin, 25px);
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ns-trips-title-pending { color: var(--ns-trips-text-2); font-weight: 600; }
.ns-trips-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(6px, 0.9vmin, 10px);
}
.ns-trips-info {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(13px, 1.7vmin, 20px);
    color: var(--ns-trips-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ns-trips-dur {
    flex: 0 0 auto;
    padding: 4px clamp(10px, 1.3vmin, 14px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: clamp(12px, 1.5vmin, 18px);
    font-weight: 600;
}

.ns-trips-more {
    display: block;
    margin: clamp(16px, 2.2vmin, 24px) auto 0;
    min-height: 56px;
    padding: 0 clamp(24px, 3vmin, 36px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ns-trips-text);
    font: inherit;
    font-weight: 600;
    font-size: clamp(14px, 1.8vmin, 20px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease-out, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ns-trips-more:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.16); }

.ns-trips-notice {
    margin-top: clamp(24px, 4vmin, 48px);
    text-align: center;
    color: var(--ns-trips-text-2);
    font-size: clamp(15px, 1.9vmin, 22px);
}
.ns-trips-error { color: #ffb4a8; }

/* Skeleton: shimmer bars in the card's own shape. */
.ns-trips-skeleton { margin-top: 4px; }
.ns-trips-card-loading { cursor: default; }
.ns-trips-sk-line {
    height: clamp(14px, 1.8vmin, 20px);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 100%);
    background-size: 200% 100%;
    animation: ns-trips-shimmer 1.3s ease-in-out infinite;
}
.ns-trips-sk-line + .ns-trips-sk-line { margin-top: 10px; }
.ns-trips-sk-short { width: 55%; }
.ns-trips-sk-date { width: 34%; margin: clamp(16px, 2.2vmin, 26px) 4px 10px; }
@keyframes ns-trips-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) { .ns-trips-sk-line { animation: none; } }

/* Start / end dots of a drawn route (mapboxgl.Markers). */
.ns-trips-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.ns-trips-dot-start { background: #34C759; }
.ns-trips-dot-end { background: #FF3B30; }
.ns-trips-dot-still { background: var(--ns-trips-out, #2D71EC); width: 22px; height: 22px; }

/* Avatars become tappable: say so to the pointer. */
#presentation-screen.map-slide-active .ns-map-ring-slot,
#presentation-screen.map-slide-active .ns-map-mk .ns-map-avatar { cursor: pointer; }

/* --- the day card's map snippet (Static Images, see map-trips.js) ----------
   The app's card leads with a 140 px map; here the box keeps a 16:5 shape at
   every panel width so the requested image size is known before it loads. It
   shimmers until the image arrives, then the image fades in. The dots are
   HTML over the image, placed with the same projection the request used. */
.ns-trips-snip {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    margin: 0 0 clamp(10px, 1.4vmin, 16px);
    border-radius: clamp(12px, 1.6vmin, 18px);
    overflow: hidden;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
    background-size: 200% 100%;
    animation: ns-trips-shimmer 1.3s ease-in-out infinite;
}
.ns-trips-snip-ready { animation: none; background: #1b1b1f; }
.ns-trips-snip-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ns-trips-snip-ready .ns-trips-snip-img { opacity: 1; }
.ns-trips-snip-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 320ms ease-out;
}
.ns-trips-snip-ready .ns-trips-snip-dot { opacity: 1; }
.ns-trips-snip-dot.ns-trips-dot-still { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
@media (prefers-reduced-motion: reduce) {
    .ns-trips-snip { animation: none; }
    .ns-trips-snip-img, .ns-trips-snip-dot { transition: none; }
}