/* ==========================================================================
   1. Global Resets, CSS Variables & Premium Typography
   ========================================================================== */
:root {
    /* V2 Summer Palette */
    --yellow:  #FFF9D2;   /* pale yellow — page bg */
    --peach:   #FFEBCC;   /* peach — card/surface */
    --sky:     #BFDDF0;   /* sky blue — borders, chips */
    --blue:    #8CC0EB;   /* steel blue — accent/active */
    --dark:    #2C4A6E;   /* deep blue — text, icons */

    /* Map old dark variable names → summer light equivalents */
    --btn-primary: #8CC0EB;
    --ocean-teal: #8CC0EB;
    --deep-teal: #FFEBCC;
    --dark-teal: #FFF9D2;
    --midnight: #FFFEF5;
    --navy-blue: #FFFFFF;
    --interactive-blue: #8CC0EB;

    /* Elevation */
    --bg-base: #FFFEF5;
    --bg-surface: #FFFFFF;
    --bg-input: #FFF9D2;
    --bg-card-deep: #FFFFFF;
    --bg-card-hover: #FFF0D6;
    --text-primary: #2C4A6E;
    --text-secondary: #6B829E;

    /* Semantic aliases */
    --color-primary: #CD5360;
    --color-secondary: var(--blue);
    --color-logo-dot: var(--blue);
    --color-interactive: var(--blue);
    --color-bg-main: var(--bg-base);
    --color-bg-card: #FFFFFF;
    --color-bg-card-deep: var(--peach);
    --color-bg-input: var(--yellow);
    --color-text-main: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-border: var(--sky);
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
}

html {
    height: -webkit-fill-available;
}

body {
    margin: 0;
    display: flex;
    height: 100vh;
    height: 100dvh; /* Chrome mobile: shrinks with browser UI, Firefox ignores */
    min-height: -webkit-fill-available; /* older Chrome/Safari fallback */
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    overflow: hidden;
}

/* ==========================================================================
   2. Layout & Page Containers
   ========================================================================== */
#map-container { 
    flex: 1; 
    position: relative; 
    height: 100%;
    margin-right: 35%; /* Reserves space for sidebar */
    transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* media queries to match min/max widths of the sidebar itinerary panel */
@media (min-width: 1428px) {
    #map-container {
        margin-right: 500px;
    }
}
@media (max-width: 1200px) {
    #map-container {
        margin-right: 420px;
    }
}

.sidebar-collapsed #map-container {
    margin-right: 72px;
}

@media (max-width: 768px) {
    #map-container {
        margin-right: 0 !important; /* sidebar overlays on mobile viewports */
    }
    .sidebar-collapsed #map-container {
        margin-right: 0 !important;
    }
}

#map { 
    width: 100%; 
    height: 100%; 
}

/* Sidebar Panel - Slate Dark Theme with deep drop shadow */
#itinerary-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35%;
    min-width: 420px;
    max-width: 500px;
    background: var(--color-bg-main);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    /* overflow-x must NOT be set here — it clips top:-26px positioned children (toggle, logo) */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    z-index: 100;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#itinerary-panel.collapsed {
    transform: translateX(100%);
}

/* Sidebar Toggle Button — positioned relative to #itinerary-panel */
.sidebar-toggle-btn {
    position: absolute;
    top: 0;
    height: 68px; /* overridden to panel-header height via JS syncToggleHeight() */
    left: -37px;
    width: 37px;
    background: var(--navy-blue);
    border: 1px solid rgba(144, 184, 224, 0.2);
    border-right: none;
    border-top: none;
    border-radius: 8px 0 0 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1000;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.12);
    outline: none;
    padding: 0;
}

.sidebar-toggle-btn:hover {
    color: var(--color-text-main);
    background: #1E5AA0;
    border-color: rgba(144, 184, 224, 0.4);
}

/* ==========================================================================
   3. Sidebar Header & Branding
   ========================================================================== */
.panel-header {
    padding: 24px 20px 16px 20px;
    background: var(--navy-blue);
    border-bottom: 1px solid rgba(144, 184, 224, 0.2);
}

/* Desktop: compact header flush with tabs */
@media (min-width: 769px) {
    .panel-header {
        padding: 10px 16px;
        border-bottom: none;
    }
    .tabs-container {
        padding: 0 6px;
        border-top: none;
    }
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Premium reeldot. Logo Styling */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-wrapper:hover {
    transform: translateY(-1px) scale(1.02);
}

.logo-icon {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 28px;
    height: 20px;
}

.logo-dot-large {
    width: 18px;
    height: 18px;
    background-color: var(--color-text-main);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.25s ease;
}

.logo-wrapper:hover .logo-dot-large {
    box-shadow: 0 0 12px var(--color-text-main);
}

.logo-dot-small {
    width: 6px;
    height: 6px;
    background-color: var(--color-text-main);
    border-radius: 50%;
    position: absolute;
    right: 1px;
    bottom: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Shiny reflection highlight on the small circle */
.logo-dot-small::after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    width: 1.5px;
    height: 1.5px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.9;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    text-transform: lowercase;
    line-height: 1;
    display: flex;
    align-items: baseline;
    user-select: none;
}

.logo-dot-blue {
    color: var(--color-logo-dot);
    transition: text-shadow 0.25s ease;
}

.logo-wrapper:hover .logo-dot-blue {
    text-shadow: 0 0 8px var(--color-logo-dot);
}

.brand-badge {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text-main);
    background: var(--dark-teal);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(45, 110, 110, 0.5);
    white-space: nowrap;
}

/* ── Auth chip (Login button / user pill) ───────────────────────────────── */
.auth-chip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Hidden while /api/me is still loading — prevents layout flash */
.auth-chip--loading { display: none; }

/* Signed-out state: "Login" button (works as <a> or <button>) */
.auth-chip .auth-signin-btn,
.auth-chip a.auth-signin-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dark-teal);
    color: var(--color-text-main);
    border: 1px solid rgba(45, 110, 110, 0.5);
    border-radius: 20px;
    padding: 0 14px;
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.auth-chip .auth-signin-btn:hover,
.auth-chip a.auth-signin-btn:hover { opacity: 0.85; }

/* Signed-in state: avatar + name pill — locked to same height as Login button */
.auth-chip .auth-user-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0 12px 0 5px;
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    position: relative;
    user-select: none;
}
.auth-dropdown {
    display: none;
    position: fixed; /* fixed so it's never clipped by overflow:hidden ancestors */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    min-width: 130px;
    z-index: 9999;
    overflow: hidden;
}
.auth-dropdown.open { display: block; }
.auth-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.15s;
}
.auth-dropdown-item:hover { background: rgba(255,255,255,0.07); }
.auth-chip .auth-avatar {
    width: 20px;
    height: 20px;
    max-height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    vertical-align: middle;
}
.auth-chip .auth-name { color: var(--color-text-main); }

/* Mobile auth chip — compact; no name text */

/* ── Login modal overlay ─────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 36px 28px 28px;
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.22s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 14px;
    left: 16px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.modal-close:hover { color: var(--color-text-main); background: rgba(255,255,255,0.06); }

.modal-brand .logo-text { font-size: 22px; }

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 4px 0 0;
    text-align: center;
}

.modal-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 6px;
    max-width: 260px;
}

/* Google sign-in button — follows Google brand guidelines */
.btn-google-signin {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--al);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.15s, background 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    margin-top: 4px;
}
.btn-google-signin:hover {
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Desktop crew bubble — invite + history only (no fake avatars) ───────── */
.crew-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.collab-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
}
.btn-close-collab {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}
.btn-close-collab:hover { color: var(--color-text-main); }
.collab-history-empty {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
    padding: 10px 0;
}

.system-status-badge {
    display: none; /* Hidden by default - Dev Mode removed permanently */
    margin-left: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
    transition: all 0.25s ease;
}

.system-status-badge.dev-mode {
    background: rgba(245, 158, 11, 0.15); /* Amber/Orange tint */
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

.system-status-badge.pi-mode {
    background: rgba(16, 185, 129, 0.15); /* Green tint */
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

/* Mobile top header — hidden on desktop, shown on mobile */
#mobile-top-header {
    display: none;
}

.mobile-logo {
    display: none;
}

.mobile-collab-dropdown {
    display: none;
}

/* ==========================================================================
   4. Navigation Tabs
   ========================================================================== */
.tabs-container {
    display: flex;
    background: var(--navy-blue);
    padding: 0 6px;
    gap: 6px;
    border-bottom: 1px solid var(--color-border);
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    padding: 12px 6px 10px;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover {
    color: var(--color-text-main);
    border-bottom-color: rgba(45, 110, 110, 0.5);
}

/* Active tab — teal underline indicator */
.tab-btn.active {
    color: #fff;
    border-bottom: 3px solid var(--ocean-teal);
}

.tab-icon {
    font-size: 15px;
}

/* ==========================================================================
   Phosphor Icons — always white, sized to context
   ========================================================================== */
[class^="ph"],
[class*=" ph-"] {
    color: #fff;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* Large placeholder icons (empty-state) */
.icon-placeholder [class^="ph"],
.icon-placeholder [class*=" ph-"] {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.7;
}

/* Spinner glyph — Phosphor icons are static, so animate circle-notch ourselves */
@keyframes phSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ph-circle-notch {
    display: inline-block;
    animation: phSpin 1s linear infinite;
}

/* ==========================================================================
   5. Dynamic Content Views
   ========================================================================== */
.views-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.view-page {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Reserve the scrollbar gutter permanently so it never appears/disappears
       as content grows (e.g. opening a reels folder) — that reservation is what
       stops the folders + New List/Add Reel/Custom buttons from shifting
       sideways when the scrollbar shows up. */
    scrollbar-gutter: stable;
    padding: 14px 16px;
    box-sizing: border-box;
    background: var(--color-bg-main);
}

/* Custom Webkit scrollbars for premium dark feel */
.view-page::-webkit-scrollbar {
    width: 6px;
}

.view-page::-webkit-scrollbar-track {
    background: var(--color-bg-main);
}

.view-page::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

.view-page::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.cards-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grouped-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   6. Location Card Layouts
   ========================================================================== */
.location-item { 
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border); 
    padding: 18px 20px;
    border-radius: 12px; 
    cursor: pointer; 
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-item:hover { 
    background: var(--bg-card-hover);
    border-color: var(--color-logo-dot);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

/* Homebase badge icon shown next to card title */
.homebase-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 6px;
    opacity: 0.75;
    font-size: 14px;
}

/* Card title row: name + optional time badge side-by-side */
.card-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.location-item strong {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;           /* allow long names to truncate/wrap */
    word-break: break-word;
}

/* Time badge — inline with title, no absolute positioning */
.time-badge {
    flex-shrink: 0;
    background: var(--am);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(26, 79, 138, 0.4);
}

/* ==========================================================================
   7. Card Form Editors
   ========================================================================== */
.edit-form { 
    display: none; 
    margin-top: 16px; 
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.edit-form label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.edit-form input, .edit-form textarea { 
    width: 100%; 
    padding: 10px 12px; 
    margin-bottom: 12px; 
    box-sizing: border-box; 
    background: var(--color-bg-input);
    border: 1px solid var(--color-border); 
    color: var(--color-text-main);
    border-radius: 8px; 
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: all 0.2s;
}

.edit-form input:focus, .edit-form textarea:focus {
    border-color: var(--color-logo-dot);
    outline: none;
    box-shadow: 0 0 0 3px rgba(144, 184, 224, 0.25);
}

/* Date & Time Picker Custom Styles (Centering text and lighting up dark picker indicators) */
.edit-form input[type="date"],
.edit-form input[type="time"],
.inline-input[type="date"],
.inline-input[type="time"] {
    text-align: center;
}

.edit-form input[type="date"]::-webkit-calendar-picker-indicator,
.edit-form input[type="time"]::-webkit-calendar-picker-indicator,
.inline-input[type="date"]::-webkit-calendar-picker-indicator,
.inline-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.3);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.edit-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.edit-form input[type="time"]::-webkit-calendar-picker-indicator:hover,
.inline-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.inline-input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.edit-form textarea { 
    resize: vertical; 
    min-height: 70px; 
}

/* ==========================================================================
   8. Buttons & Controls
   ========================================================================== */
.btn-group { 
    display: flex; 
    gap: 8px; 
}

.btn-save { 
    background: var(--color-primary); 
    color: var(--color-text-main); 
    border: none; 
    padding: 10px 16px; 
    cursor: pointer; 
    flex: 1; 
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: opacity 0.2s;
    box-shadow: 0 2px 6px rgba(26, 78, 82, 0.4);
}

.btn-save:hover {
    opacity: 0.9;
}

.btn-delete { 
    background: #ef4444; 
    color: white; 
    border: none; 
    width: 42px;
    cursor: pointer; 
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-delete:hover { 
    background: #dc2626; 
}

.btn-clear { 
    background: transparent; 
    color: var(--color-logo-dot); 
    border: 1px dashed rgba(144, 184, 224, 0.4); 
    padding: 8px; 
    cursor: pointer; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 12px;
    margin-bottom: 12px; 
    width: 100%;
    transition: all 0.2s;
}

.btn-clear:hover {
    background: rgba(144, 184, 224, 0.1);
    border-color: var(--color-logo-dot);
}

/* ==========================================================================
   9. Daily Itinerary blocks & timelines
   ========================================================================== */
.date-block {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(45, 110, 110, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.date-block h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(45, 110, 110, 0.35);
}

.date-header {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-header:hover {
    color: var(--color-logo-dot);
}

.mode-select {
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: border 0.2s;
}

.mode-select:focus {
    border-color: var(--color-logo-dot);
}

.date-items-row { 
    display: flex; 
    flex-direction: column; 
}

.date-items-row .location-item { 
    margin-bottom: 0; 
    width: 100%;
    box-sizing: border-box;
}

/* Timeline Connectors & transit times indicators */
.transit-connector { 
    display: flex; 
    justify-content: center;
    align-items: center; 
    margin: 12px 0;
    position: relative;
    height: 40px;
}

.transit-line { 
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0px; 
    border-left: 2px dashed var(--color-border); 
    z-index: 1;
    transition: border-color 0.25s ease;
}

.transit-info { 
    position: relative;
    z-index: 2;
    background: var(--color-bg-input); 
    border: 1px solid var(--color-border); 
    border-radius: 20px; 
    padding: 6px 16px; 
    font-size: 11px; 
    color: var(--color-text-muted); 
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px; /* Improved spacing between elements */
    transition: all 0.25s ease;
}

/* Custom styles for select inside transit pill */
.connector-mode-select {
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-size: 11px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    padding: 2px 6px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.connector-mode-select:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.connector-mode-select option {
    background: var(--color-bg-card);
    color: var(--color-text-main);
    font-weight: 600;
}

/* Google Maps direction shortcut link */
.transit-map-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 2px;
}

.transit-map-link:hover {
    color: var(--color-logo-dot);
    transform: scale(1.2) translate(1px, -1px);
    text-shadow: 0 0 6px var(--color-logo-dot);
}

/* Color definitions for each transport type */
.transit-connector.mode-DRIVING .transit-line { border-left-color: #f43f5e; }
.transit-connector.mode-DRIVING .transit-info { border-color: #f43f5e; }

.transit-connector.mode-WALKING .transit-line { border-left-color: #10b981; }
.transit-connector.mode-WALKING .transit-info { border-color: #10b981; }

.transit-connector.mode-TRAIN .transit-line { border-left-color: #3B82F6; }
.transit-connector.mode-TRAIN .transit-info { border-color: #3B82F6; }

.transit-connector.mode-BUS .transit-line { border-left-color: #f59e0b; }
.transit-connector.mode-BUS .transit-info { border-color: #f59e0b; }

/* ==========================================================================
   10. Add-place button + Map Autocomplete Input Box
   ========================================================================== */

/* "+" floating button — mobile only, shown only in peek state */
#add-place-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 300;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 22px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background 0.15s, border-color 0.15s;
}
#add-place-btn:hover,
#add-place-btn.active {
    background: var(--color-logo-dot);
    border-color: var(--color-logo-dot);
    color: #fff;
}

/* Search bar — hidden by default, shown when add-place-btn is active */
#pac-input {
    position: absolute !important;
    top: 10px !important;
    left: 58px !important;   /* right of the + button */
    margin: 0 !important;
    width: 320px !important;
    height: 40px !important;
    padding: 0 16px !important;
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
    color: var(--color-text-main) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    box-shadow: var(--elev-3) !important;
    outline: none !important;
    z-index: 300;
    transition: opacity 0.2s, transform 0.2s !important;
    /* hidden state */
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-6px) !important;
}
#pac-input.search-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

#pac-input::placeholder {
    color: var(--color-text-muted) !important;
}

/* Recent searches — shown under the search bar when it's focused and empty,
   hidden as soon as the user starts typing (Google's own .pac-container
   suggestion dropdown takes over from there). */
.recent-searches-list {
    position: absolute;
    /* Gap between the search bar and the list, and full viewport width —
       matches Google's own .pac-container suggestion dropdown instead of
       hugging the search bar's own (narrower, inset) width. */
    top: 64px;
    left: 0;
    right: 0;
    width: auto;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 299;
    overflow: hidden;
}
.recent-searches-clear-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--al);
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--am);
    cursor: pointer;
}
.recent-searches-clear-btn:active {
    background: var(--bg);
}
.recent-search-item {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--al);
}
.recent-search-item:last-child {
    border-bottom: none;
}
.recent-search-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.recent-search-item-main:active {
    background: var(--bg);
}
.recent-search-item-main i {
    color: var(--sub);
    flex-shrink: 0;
}
.recent-search-item-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-search-item-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.recent-search-item-remove:active {
    background: var(--al);
    color: var(--text);
}

#pac-input:focus {
    background: var(--color-bg-input) !important;
    border-color: var(--color-logo-dot) !important;
    box-shadow: 0 4px 16px rgba(144, 184, 224, 0.25) !important;
}

/* ==========================================================================
   11. Google Map Info Window popups styling
   ========================================================================== */
.info-window {
    text-align: center;
    padding: 14px 16px 16px;
    width: min(340px, calc(100vw - 32px));
    max-width: 340px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    outline: none;
}
.info-window p { text-align: left; }
/* Google's InfoWindow chrome (and/or its back/close buttons) is focusable —
   on some mobile browsers a tap leaves the default focus ring showing as a
   stray black outline around the card. Suppress it everywhere a popup card
   can render. */
.gm-style-iw, .gm-style-iw-c, .gm-style-iw-d,
.reel-card, .info-window, .map-back-btn,
.gm-style-iw:focus, .gm-style-iw-c:focus, .reel-card:focus, .info-window:focus,
.map-back-btn:focus, .map-back-btn:focus-visible {
    outline: none !important;
}

.info-window-title {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    text-align: center;
}

.info-window h3 {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    text-align: center; /* close X removed — title centers cleanly */
}

.info-window p {
    color: var(--sub);
    font-size: 12px;
    margin: 0 0 8px 0;
}

.info-window .rating-text {
    color: var(--sub);
    font-size: 12px;
    margin-bottom: 10px;
}

.btn-save-map {
    background: var(--color-primary);
    color: #ffffff;
    border: none !important;
    outline: none !important;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: auto;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 8px rgba(205, 83, 96, 0.25);
    transition: opacity 0.2s;
    box-sizing: border-box !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save-map:hover {
    opacity: 0.88;
}

/* ==========================================================================
   Google Maps InfoWindow — Dark Theme Override
   Eliminates default white bg, top chrome gap, and unstyled arrow
   ========================================================================== */

/* Main container: dark bg + teal border */
.gm-style .gm-style-iw-c {
    background: #141C2B !important;
    border: 1px solid #1A4E52 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
}

/* Scrollable inner div — fluid on small phones, never clips off-screen */
.gm-style .gm-style-iw-d {
    max-height: 560px !important;
    overflow: hidden !important;
    padding: 0 !important;
    max-width: min(290px, calc(100vw - 56px)) !important;
    width: min(290px, calc(100vw - 56px)) !important;
    box-sizing: border-box !important;
}

/* Ensure the outer InfoWindow wrapper never overflows the viewport */
.gm-style .gm-style-iw-c {
    max-width: min(310px, calc(100vw - 40px)) !important;
    box-sizing: border-box !important;
}

/* Chrome row removed entirely — no default 'x' button, no empty top bar.
   Popups are dismissed by tapping the map; reels use the in-popup Exit button. */
.gm-style .gm-style-iw-chr {
    display: none !important;
}

/* Arrow / tail — match dark bg */
.gm-style .gm-style-iw-tc::after,
.gm-style .gm-style-iw-t::after {
    background: #141C2B !important;
}

/* ==========================================================================
   12. Country header lists
   ========================================================================== */
.country-group {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(45, 110, 110, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: padding 0.2s ease;
}

/* Expanded state gets more breathing room around the cards */
.country-group:not(.country-group--collapsed) {
    padding: 14px 16px;
    margin-bottom: 20px;
}

/* Grid (not flex) so the title truly centers between the star and the
   bulk-arrow — both small icon buttons of similar width, unlike before when
   the count sat on the far right as its own flex item and threw the title
   off-centre. */
.country-header {
    display: grid;
    /* Fixed (not auto) edge columns of equal width — with auto, the star
       button and the count badge (variable width depending on digit count)
       never matched, so the title never actually centered relative to the
       full row, only within whatever space happened to be left over. */
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    margin: 0;
    padding: 0 4px;
    border: none;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

/* Clickable country label — centered within its grid column. The bulk-arrow
   chevron now lives in its own grid column (mirroring the star's column on
   the opposite side) instead of sharing this flexbox, so .chl-name is the
   sole content here and centers cleanly on its own. */
.country-header-label {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: color 0.15s;
    min-width: 0;
}
.country-header:hover .country-header-label { color: var(--color-logo-dot); }

/* Country name centers on its own; the flag hangs off its left edge (absolute)
   so it does not push the text off-centre. */
.country-header-label .chl-name {
    position: relative;
    display: inline-block;
}
.country-header-label .chl-name::before {
    content: attr(data-flag);
    position: absolute;
    right: 100%;
    margin-right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
}

.country-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #d1d5db;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    justify-self: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.15s;
}
.country-star--active { color: #f59e0b !important; transform: scale(1.15); }
.country-star--active i { color: #f59e0b !important; }

.country-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: rgba(67,132,150,0.18);
    color: var(--color-logo-dot);
    border-radius: 10px;
    padding: 2px 6px;
    flex-shrink: 0;
    justify-self: center;
    text-align: center;
    min-width: 18px;
    box-sizing: border-box;
}

.city-subheader {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px 4px;
}

/* Route timing pill — floated at midpoint of each route segment via OverlayView */
@keyframes routePillFadeIn {
    from { opacity: 0; transform: translate(-50%, -130%) scale(0.88); }
    to   { opacity: 1; transform: translate(-50%, -120%) scale(1); }
}
@keyframes routePillFadeOut {
    from { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -130%) scale(0.88); }
}
.route-timing-pill {
    background: var(--am) !important;
    border: 1px solid var(--am) !important;
    border-radius: 20px;
    padding: 4px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.1px;
    animation: routePillFadeIn 0.4s ease forwards;
}

/* Per-transport-mode colours matching the polyline strokes (getModeColor) */
.route-timing-DRIVING  { background: #2B5A8A !important; border-color: #3a78be !important; }
.route-timing-WALKING  { background: #C0392B !important; border-color: #e74c3c !important; }
.route-timing-TRAIN    { background: #2E7A50 !important; border-color: #3aaa6e !important; }
.route-timing-BUS      { background: #9a7714 !important; border-color: #C89B1C !important; }

/* Separator only shows when expanded */
.country-group:not(.country-group--collapsed) .country-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}

/* Reel count pill — shown on saved cards */
.reel-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--color-logo-dot);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.reel-tag-pill i { font-size: 9px; }
.location-item.itinerary-card .reel-tag-pill { display: none; }
/* Tapping an itinerary card is a no-op (see app.js createDOMCard) — suppress
   the default mobile tap-highlight flash so it doesn't look like something
   activated when nothing did. */
.location-item.itinerary-card { -webkit-tap-highlight-color: transparent; }

.country-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Homebase ring on active homebase cards */
.location-item.homebase-active {
    outline: 2px solid #2D6E6E;
    box-shadow: 0 0 0 4px rgba(45, 110, 110, 0.22), 0 2px 8px rgba(0,0,0,0.25);
}

/* View-mode notes display in itinerary cards and right panel */
.view-mode-notes {
    padding: 4px 0 2px;
}

.view-mode-notes p {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-mode-notes .empty-notes {
    opacity: 0.45;
    font-style: italic;
}

/* ==========================================================================
   13. Floating Current Location Map Control Button
   ========================================================================== */
#current-location-btn {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(8, 24, 73, 0.85); /* bg-main fallback */
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#current-location-btn:hover {
    background: var(--color-logo-dot);
    color: #ffffff;
    transform: scale(1.08) rotate(15deg);
    border-color: rgba(144, 184, 224, 0.5);
    box-shadow: 0 6px 16px rgba(144, 184, 224, 0.4);
}

#current-location-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   14. Trip Selection & Management Toolbar
   ========================================================================== */
/* ==========================================================================
   14. Trip Selection & Management Toolbar
   ========================================================================== */
.trip-management-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.trip-selector {
    flex: 1;
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.trip-selector:focus {
    border-color: var(--color-logo-dot);
}

.btn-trip-action {
    background: var(--color-bg-input);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-trip-action:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main);
    border-color: var(--color-logo-dot);
}

.btn-trip-action.btn-trip-add:hover {
    background: rgba(144, 184, 224, 0.15);
    color: var(--color-logo-dot);
    border-color: rgba(144, 184, 224, 0.4);
}

.btn-trip-action.btn-trip-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Quick add/remove trip location buttons inside Saved Places */
.btn-trip-add-loc {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px dashed rgba(16, 185, 129, 0.4);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 12px;
    width: 100%;
    transition: all 0.2s;
}

.btn-trip-add-loc:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.btn-trip-remove-loc {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px dashed rgba(245, 158, 11, 0.4);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 12px;
    width: 100%;
    transition: all 0.2s;
}

.btn-trip-remove-loc:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

/* ==========================================================================
   15. Unscheduled Location Picker & Inline Form Styles
   ========================================================================== */
.picker-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.picker-filter-chips::-webkit-scrollbar { display: none; }
/* No press/active-state animation on the itinerary picker's country filter
   chips — the shared .filter-chip class transitions color/transform, but
   this list re-filters instantly and shouldn't visibly animate. Extra
   specificity (body.v2) needed to beat the later, equally-specific
   `body.v2 .filter-chip` !important rule. */
body.v2 .picker-filter-chips .filter-chip,
body.v2 .picker-filter-chips .filter-chip:active {
    transition: none !important;
    transform: none !important;
}

/* White card with section dividers so the inline "Add to itinerary" picker
   matches the Add-to-Pin sheet (header · search · chips · list, each divided). */
.saved-selector-container {
    margin-top: 8px;
    /* Scroll runway so the LAST pin's inline DATE/TIME expander can be scrolled
       fully into view above the floating chat FAB (was cut off at the bottom). */
    margin-bottom: 140px;
    /* This lives inside the column-flex, overflow-y:auto #grouped-timeline
       scroller. Without this it's a shrinkable flex item: it collapses to the
       visible height and — being overflow:hidden — CLIPS the last pins instead
       of letting the page scroll. Don't shrink; keep full content height so the
       scroller can actually scroll to the bottom. */
    flex-shrink: 0;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}

.saved-selector-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--al);
}
.saved-selector-container .picker-search-row { padding: 10px 14px; background: var(--white); }
.saved-selector-list .picker-filter-chips {
    padding: 0 0 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--al);
}
.saved-selector-title {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.5px;
    padding: 0 2px;
}

.saved-selector-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: visible;
    padding: 12px 14px 14px;
}

.saved-selector-list::-webkit-scrollbar,
.saved-selector-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.select-location-row {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 10px);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
    text-align: left;
    box-shadow: 0 1px 3px var(--shadow, rgba(0,0,0,0.05));
}
.select-location-row:last-child { margin-bottom: 0; }

.select-location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.select-location-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-main);
    flex: 1;
}

.btn-schedule-badge {
    font-size: 12px;
    color: var(--color-text-main);
    font-weight: 700;
    background: rgba(144, 184, 224, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(144, 184, 224, 0.3);
    flex-shrink: 0;
    text-align: center;
    min-width: 85px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-schedule-badge:hover {
    background: rgba(144, 184, 224, 0.25);
    border-color: rgba(144, 184, 224, 0.5);
}

/* "Save to my Pins" — shown on picker rows for pins from a shared trip the
   viewer doesn't own, next to the Schedule badge. */
.btn-save-mine-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-save-mine-badge:active { background: var(--al); }

.inline-schedule-form {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}

.inline-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.inline-form-field {
    flex: 1;
}

.inline-label {
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.inline-input {
    margin: 0;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    width: 100%;
    box-sizing: border-box;
    transition: border 0.2s;
}

.inline-input:focus {
    border-color: var(--color-logo-dot);
    outline: none;
}

.inline-btn-submit {
    margin: 0;
    padding: 8px;
    font-size: 12px;
    width: 100%;
}

.add-location-panel {
    margin-top: 20px;
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
}

.add-location-btn-toggle {
    width: 100%;
    margin-bottom: 12px;
    background: rgba(144, 184, 224, 0.15);
    border: 1px solid rgba(144, 184, 224, 0.4);
    color: var(--color-logo-dot);
}

.add-location-btn-toggle:hover {
    background: rgba(144, 184, 224, 0.25);
}

.add-location-picker-container {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--al);
}
.picker-locations-scroll {
    overflow-y: auto;
    max-height: 240px;
    padding-right: 4px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.picker-locations-scroll::-webkit-scrollbar { width: 4px; }
.picker-locations-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ==========================================================================
   16. Desktop Extended Mode Layout Styling
   ========================================================================== */
#itinerary-panel {
    display: flex;
    flex-direction: row;
}

.panel-primary-column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Contains horizontal overflow without clipping outside children */
}

@media (min-width: 769px) {
    /* On desktop: always-visible search bar fixed at viewport centre.
       Not pushed into Google Maps controls — CSS handles centering. */
    #add-place-btn { display: none !important; }
    #pac-input,
    #pac-input.search-visible {
        position: absolute !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
        width: 360px !important;
        z-index: 300 !important;
    }
    #recent-searches-list {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 360px !important;
    }

    #itinerary-panel.extended {
        width: 60% !important;
        min-width: 750px !important;
        max-width: 900px !important;
    }

    .sidebar-extended #map-container {
        margin-right: 60% !important;
    }

    /* Extended mode: the map narrows, so the 3-button pill collides with the
       search box. Collapse it to the compact single cycle button instead. */
    .sidebar-extended #map-type-control {
        display: none !important;
    }
    .sidebar-extended #map-type-mobile-btn {
        display: flex;
        position: absolute;
        top: 10px;
        left: 58px; /* right of the + button */
        z-index: 200;
    }
}

@media (min-width: 1428px) {
    .sidebar-extended #map-container {
        margin-right: 900px !important;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-extended #map-container {
        margin-right: 750px !important;
    }
}

/* ==========================================================================
   17. Mobile Viewport Bottom Sheet Layout Tweaks
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Slim top header (replaces the old handle-strip tabs) ── */
    #mobile-top-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        padding: 0 12px;
        background: var(--navy-blue);
        border-bottom: 1px solid rgba(144, 184, 224, 0.2);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        z-index: 400;
        box-sizing: border-box;
    }
    /* Left slot: collab bubble */
    #mobile-top-header > :first-child { justify-self: start; }
    /* Center slot: logo — always perfectly centered */
    #mobile-top-header .logo-wrapper {
        justify-self: center;
        gap: 5px;
    }
    #mobile-top-header .logo-icon {
        width: 20px;
        height: 15px;
    }
    #mobile-top-header .logo-dot-large {
        width: 13px;
        height: 13px;
    }
    #mobile-top-header .logo-dot-small {
        width: 5px;
        height: 5px;
    }
    #mobile-top-header .logo-text {
        font-size: 19px;
        font-weight: 700;
        color: var(--color-text-main);
        text-transform: lowercase;
        user-select: none;
    }
    /* Right slot: auth chip */
    #mobile-top-header > :last-child { justify-self: end; }
    #mobile-top-header .mobile-collab-bubble {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--dark-teal);
        border: 1.5px solid rgba(45, 110, 110, 0.6);
        font-size: 15px;
        cursor: pointer;
        color: var(--color-text-main);
        box-shadow: 0 0 0 2px rgba(45, 110, 110, 0.2);
        transition: background 0.15s;
    }
    #mobile-top-header .mobile-collab-bubble:active {
        background: var(--color-bg-main);
    }
    #mobile-top-header .auth-chip--mobile {
        max-width: 110px;
    }

    /* Push map down so it starts below the header */
    #map-container {
        margin-top: 48px !important;
        height: calc(100% - 48px) !important;
    }

    /* "+" button — only in peek state */
    body.sheet-peek #add-place-btn {
        display: flex;
        top: 10px;
    }
    /* Search bar hidden in full/half states (map is mostly covered) */
    body.sheet-full #pac-input,
    body.sheet-half #pac-input,
    body.sheet-full #recent-searches-list,
    body.sheet-half #recent-searches-list {
        display: none !important;
    }
    /* Search bar on mobile — stretches from + button to right edge */
    #pac-input {
        top: 10px !important;
        left: 58px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    #recent-searches-list {
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }

    #itinerary-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Anchor below header — panel can never slide behind the 48px header */
        top: 48px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        border-left: none;
        border-top: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.7), 0 -6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: translateY(0);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    /* Peek state — only the top drag handle visible */
    #itinerary-panel.collapsed {
        transform: translateY(calc(100% - 60px)) !important;
    }

    /* Half state — roughly half the panel visible */
    #itinerary-panel.sheet-half {
        transform: translateY(45vh) !important;
    }
    body.sheet-half .detail-content,
    body.sheet-half .detail-placeholder,
    body.sheet-peek .detail-content,
    body.sheet-peek .detail-placeholder {
        display: none !important;
    }
    /* Hide floating pickers and edit bars in peek/half — they'd show over the map */
    body.sheet-peek #global-location-picker,
    body.sheet-half #global-location-picker,
    body.sheet-peek .reels-edit-bar,
    body.sheet-half .reels-edit-bar,
    body.sheet-peek #trip-edit-bar,
    body.sheet-half #trip-edit-bar,
    body.sheet-peek .section-menu-popup,
    body.sheet-half .section-menu-popup {
        display: none !important;
    }
    .saved-right-column { display: none !important; }
    #itinerary-right-column-dynamic { display: none !important; }

    /* In half state the panel is shifted down 45vh, so its bottom sits 45vh off-screen.
       Cap the primary column to only the visible slice so overflow-y scroll stays
       within what the user can actually see and reach. Panel's own height is
       calc(100vh - 70px) (see body.v2 #itinerary-panel), not the 48px this used
       to assume, and #sheet-handle (drag bar + back/title row) sits above the
       column in normal flow eating another ~80px before the scrollable area even
       starts — both must be subtracted or the column's bottom renders past the
       visible screen edge, clipping the last item(s) out of scroll reach. */
    body.sheet-half .panel-primary-column {
        height: calc(55vh - 150px);
        max-height: calc(55vh - 150px);
    }

    /* Scroll fix: panel uses 90vh, the flex chain must explicitly cap sizes */
    .panel-primary-column {
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .views-wrapper {
        flex: 1 1 0;
        min-height: 0;       /* prevents flex children overflowing their container */
        overflow: hidden;
    }
    .view-page {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Expand/collapse handle — sits at the very top of the sheet (inside panel,
       below the fixed 48px header). panel-primary-column is padded down to clear it. */
    .sidebar-toggle-btn {
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 44px !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        background: var(--navy-blue) !important;
        box-shadow: none !important;
        color: var(--color-text-muted) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        z-index: 10 !important;
        /* Larger invisible touch target above the visible strip */
        touch-action: none;
    }
    .sidebar-toggle-btn::before { content: none; }

    /* Push tab content below the 44px handle strip */
    .panel-primary-column {
        padding-top: 44px;
    }

    /* Peek now uses 30px toggle height */
    #itinerary-panel.collapsed {
        transform: translateY(calc(100% - 60px)) !important;
    }

    .panel-header {
        display: none !important;
    }

    /* Old handle-strip elements hidden — they moved to #mobile-top-header */
    .mobile-logo { display: none !important; }
    .mobile-collab-bubble { display: none; }

    /* Mobile collab dropdown header text & close button */
    .mobile-collab-title {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text-main);
    }
    .mobile-collab-close {
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: 14px;
        padding: 0 4px;
    }
    /* Invite toggle button */
    .btn-invite-toggle {
        width: 100%;
        padding: 8px;
        background: transparent;
        border: 1px dashed var(--color-border);
        border-radius: 8px;
        color: var(--color-text-muted);
        font-size: 12px;
        cursor: pointer;
        text-align: center;
        transition: border-color 0.2s, color 0.2s;
    }
    .btn-invite-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

    /* Send invite button within mobile dropdown */
    .mobile-invite-send { width: 100%; padding: 8px; }

    /* Mobile collab dropdown — anchored to top header collab button */
    .mobile-collab-dropdown {
        position: fixed;
        top: 52px;
        left: 8px;
        width: calc(100vw - 16px);
        max-width: 340px;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 14px 16px 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 1001;
        box-sizing: border-box;
    }

    .mobile-collab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .tabs-container {
        padding: 0 4px;
    }

    .tab-btn {
        padding: 10px 4px 8px;
    }

    /* Map controls — only in peek state.
       Panel peek = translateY(calc(100% - 60px)), so 60px is always visible at bottom.
       Buttons sit 16px above that edge, which is reliable across all screen sizes. */
    #current-location-btn {
        display: none !important;
    }
    body.sheet-peek #current-location-btn {
        display: flex !important;
        bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        z-index: 200 !important;
    }

    /* Desktop terrain pill — hidden on mobile */
    #map-type-control { display: none !important; }

    /* Mobile terrain cycling button — only in peek state */
    #map-type-mobile-btn {
        position: absolute;
        bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        display: none;
        z-index: 200;
    }
    body.sheet-peek #map-type-mobile-btn {
        display: flex;
    }
}

/* ==========================================================================
   17b. Tab Filter Chips (Saved country filter, Bookings type filter)
   ========================================================================== */
/* Toolbar row: chips on the left, Edit button pinned to the right */
.saved-toolbar {
    display: flex;
    align-items: center;
    padding: 0 4px 10px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-main);
}
.saved-toolbar #saved-country-chips {
    flex: 1;
    min-width: 0 !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* v2: grouped (itinerary) page uses flexbox so date-tab-bar is always at top, timeline scrolls below */
body.v2 #page-grouped.view-page {
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* The whole grey content area (pill row + timeline below) reads as one
       rounded panel, top and bottom, rather than a flush rectangle sharing
       the sheet's own edges. */
    border-radius: 16px !important;
}
body.v2 #date-tab-bar-wrapper {
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
}
/* Add Location — its own bar between the date-picker pills and the
   timeline (edit mode only), rather than pinned inline in the pill row. */
body.v2 #add-location-bar {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
    overflow: hidden !important;
    /* Slide + fade down when edit mode reveals it (fresh element each render,
       so the entry animation plays on insert) instead of popping in. */
    animation: addLocSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top;
}
@keyframes addLocSlideDown {
    from { max-height: 0; opacity: 0; transform: translateY(-8px); }
    to   { max-height: 70px; opacity: 1; transform: translateY(0); }
}
body.v2 #add-location-bar-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.3px;
    background: rgba(205, 83, 96, 0.15);
    border: 1px solid rgba(205, 83, 96, 0.5);
    color: #f87171;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.v2 #page-grouped #grouped-timeline.grouped-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 14px !important;
    min-height: 0 !important;
}
/* Folder grid view (contains the trip pill list) mirrors the Reels tab's page
   padding (14px 6px) so the Add Trip / Sort toolbar sits with the same inset
   and the same top/bottom breathing room as the Reels tab's function buttons.
   The drilled-in day-timeline view (date blocks, no pill list) keeps its own
   8px/16px inset. */
body.v2 #page-grouped #grouped-timeline.grouped-list:has(.trip-pill-list) {
    padding: 14px 6px !important;
}

/* v2: saved page uses flexbox so toolbar is always at top, list scrolls below */
body.v2 #page-saved.view-page {
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    position: relative !important; /* anchor the floating Add-pins bar */
}
/* Leave room so the last pins aren't hidden behind the floating Add-pins bar.
   The bar is ~67px tall (12px pad + ~43px button + 12px pad) PLUS the bottom
   safe-area it also pads for — 80px left the last card's bottom edge sitting
   inside the bar's gradient fade. Clear the bar's full height + safe-area + a
   comfortable gap so the last card always scrolls fully into view above it. */
body.v2.pins-in-list #page-saved #saved-list.cards-list { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
body.v2 #page-saved .saved-toolbar {
    flex-shrink: 0 !important;
    /* Small downward nudge (was -6px, absorbing all of the .views-wrapper's
       14px top gap) so the chip row sits with a touch more breathing room
       below the header instead of sitting flush against it. */
    margin-top: 0px !important;
    padding: 8px 14px 10px !important;
    position: static !important;
    /* Same grey as the panel body (matches #date-tab-bar-wrapper in the
       Itinerary tab) so the whole panel reads as one continuous grey area,
       with the outer container's own rounding visible at the top corners. */
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
    z-index: auto !important;
}
body.v2 #page-saved #saved-list.cards-list,
body.v2 #page-saved #saved-others-list.cards-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 14px 14px !important;
    min-height: 0 !important;
}
/* Tighter spacing between Saved country bars (was 20px flex gap + 8px group
   margin = ~28px). */
body.v2 #page-saved #saved-list.cards-list { gap: 10px !important; }
body.v2 #saved-list .country-group { margin-bottom: 0 !important; }
.sort-btn {
    flex-shrink: 0;
    margin-left: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--elev-1);
    color: var(--color-text-main, #1e293b);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.sort-btn:active { opacity: 0.7; transform: translateY(1px); box-shadow: none; }
.saved-pin-sort-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 8px 0;
}
/* Name chip labels shown above map pins during route/date filter mode */
.map-pin-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: opacity 0.3s ease;
}
/* Route-mode glide: fades a stop's label once the icon has passed it, so a
   cluster of nearby stops doesn't stay a solid wall of overlapping
   full-opacity labels for the rest of the animation. */
.map-pin-label.route-label-passed {
    opacity: 0.45;
}

/* Date map-filter toggle button in the itinerary date header */
.btn-date-map-toggle {
    flex-shrink: 0;
    width: auto;
    min-width: 72px;
    height: 36px;
    padding: 0 10px;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-date-map-toggle::after {
    content: 'Route';
    font-size: 12px;
    font-weight: 500;
}
.btn-date-map-toggle:hover {
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}
.btn-date-map-toggle.active {
    background: rgba(144, 184, 224, 0.15);
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}

/* Date block collapse */
.date-block--collapsed .date-items-row,
.date-block--collapsed .add-location-picker-container {
    display: none !important;
}
.date-collapse-caret {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.tab-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 4px 0;
    margin-bottom: 14px;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--elev-1);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.filter-chip:hover {
    border-color: var(--color-logo-dot);
    color: var(--color-text-main);
}
.filter-chip.active {
    background: var(--am);
    border-color: var(--am);
    color: #fff;
}

/* ==========================================================================
   17c. Mobile Reel Overlay — large modal (not full screen)
   ========================================================================== */
#mobile-reel-overlay {
    display: none;
    position: fixed;
    top: 6vh;
    left: 4vw;
    right: 4vw;
    bottom: 6vh;
    z-index: 600;
    background: #000;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
#mobile-reel-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-bg-main);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}
#mobile-reel-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto; /* pin to right */
}
#mobile-reel-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none; /* clicks pass through to the back button behind it */
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 80px; /* prevent overlap with back button on short titles */
}
#mobile-reel-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

/* ==========================================================================
   18. Collaboration Panel Styles (Extended Column)
   ========================================================================== */
.panel-extended-column {
    display: none;
}

#itinerary-panel.extended .panel-primary-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.extended-header {
    padding: 24px 20px 16px 20px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extended-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
}

.sync-status {
    font-size: 11px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.extended-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.extended-scrollable::-webkit-scrollbar {
    width: 6px;
}
.extended-scrollable::-webkit-scrollbar-track {
    background: var(--color-bg-main);
}
.extended-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

.collab-card {
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.collab-card h4 {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    display: flex;
    justify-content: space-between;
}

.crew-avatars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
}

.avatar.owner {
    background: var(--color-primary);
    border-color: var(--color-logo-dot);
}

.avatar:hover {
    transform: scale(1.1);
}

.avatar-add {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed rgba(45, 110, 110, 0.6);
    color: var(--color-text-main);
    background: var(--dark-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-add:hover {
    border-color: var(--ocean-teal);
    color: #fff;
    background: rgba(45, 110, 110, 0.35);
}

.crew-notes-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    resize: vertical;
    margin-bottom: 8px;
}

.crew-notes-textarea:focus {
    border-color: var(--color-logo-dot);
    outline: none;
}

.export-buttons-grid {
    display: flex;
    gap: 8px;
}

.btn-export {
    flex: 1;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 8px 4px !important;
    height: auto !important;
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-export:hover {
    background: rgba(144, 184, 224, 0.15);
    border-color: var(--color-logo-dot);
    color: var(--color-logo-dot);
}

/* ==========================================================================
   19. Bookings & Logistics Sub-Tab Cards Styling
   ========================================================================== */
.booking-card {
    background: var(--dark-teal);
    border: 1px solid var(--color-border);
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    margin-bottom: 12px;
}

.booking-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-logo-dot);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

.booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
}

.btn-booking-edit {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

.booking-row {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.booking-row strong {
    color: var(--color-text-muted);
}

.pnr-container {
    background: var(--color-bg-input);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-top: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pnr-container:hover {
    border-color: var(--color-logo-dot);
    box-shadow: 0 0 10px rgba(144, 184, 224, 0.2);
}

.pnr-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pnr-code {
    font-family: 'Outfit', monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-logo-dot);
    text-transform: uppercase;
}

.basecamp-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================================================
   20. Split Screen Extended Layout CSS
   ========================================================================== */

/* Mobile / Default non-extended split styles */
.saved-split-container,
.itinerary-split-container,
.bookings-split-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saved-left-column, .saved-right-column,
.itinerary-left-column, .itinerary-right-column,
.bookings-left-column, .bookings-right-column {
    width: 100%;
}

.saved-right-column,
.itinerary-right-column,
.extended-crew-bubble {
    display: none;
}

/* Desktop Extended split styles */
@media (min-width: 769px) {
    /* Chips row not needed in split view — left column still shows the list */
    #itinerary-panel.extended #saved-country-chips { display: none; }

    #itinerary-panel.extended .saved-split-container,
    #itinerary-panel.extended .itinerary-split-container,
    #itinerary-panel.extended .bookings-split-container {
        display: flex;
        flex-direction: row;
        gap: 24px;
        height: calc(100vh - 120px); /* tighter offset now chips row is hidden */
        box-sizing: border-box;
    }

    #itinerary-panel.extended .saved-left-column,
    #itinerary-panel.extended .saved-right-column,
    #itinerary-panel.extended .itinerary-left-column,
    #itinerary-panel.extended .itinerary-right-column,
    #itinerary-panel.extended .bookings-left-column,
    #itinerary-panel.extended .bookings-right-column {
        flex: 1;
        width: 50%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
    }

    /* Hide scrollbars on split columns — the left/right divider already
       shows visually; a second teal bar in the middle looks misaligned */
    #itinerary-panel.extended .saved-left-column,
    #itinerary-panel.extended .saved-right-column,
    #itinerary-panel.extended .itinerary-left-column,
    #itinerary-panel.extended .itinerary-right-column,
    #itinerary-panel.extended .bookings-left-column,
    #itinerary-panel.extended .bookings-right-column {
        scrollbar-width: none; /* Firefox */
    }
    #itinerary-panel.extended .saved-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .saved-right-column::-webkit-scrollbar,
    #itinerary-panel.extended .itinerary-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .itinerary-right-column::-webkit-scrollbar,
    #itinerary-panel.extended .bookings-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .bookings-right-column::-webkit-scrollbar {
        width: 0;
        display: none;
    }

    #itinerary-panel.extended .saved-right-column {
        display: flex;
        border-left: 1px solid var(--color-border);
        padding-left: 20px;
        padding-top: 0;
    }
    #itinerary-panel.extended .saved-right-column .detail-content {
        margin-top: 0;
    }

    #itinerary-panel.extended .itinerary-right-column {
        display: flex;
        border-left: 1px solid var(--color-border);
        padding-left: 20px;
    }

    /* Floating Collaboration Crew Bubble on Top Right */
    /* Hide auth chip and system badge in expanded mode — crew bubble takes that space */
    body.sidebar-extended #auth-chip,
    body.sidebar-extended #system-status-badge { display: none !important; }

    #itinerary-panel.extended .extended-crew-bubble {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        height: 48px; /* matches compact header height */
        padding: 0 16px;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 99;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .crew-avatars {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    #itinerary-panel.extended .extended-crew-bubble .avatar-add {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 200px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline .inline-input {
        padding: 6px 8px;
        font-size: 11px;
    }

    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline .btn-save {
        padding: 6px;
        font-size: 11px;
        width: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   V2 Layout — full-screen map + bottom sheet
   Palette: #F8FAFC (bg) · #D9EAFD (accent-light) · #BCCCDC (accent-mid) · #9AA6B2 (accent-dark)
   UI is mostly white; palette used as accents only.
   ========================================================================== */

/* ── V2 Palette tokens + override all cream/yellow globals inside body.v2 ── */
:root {
    --bg:        #F1F3F4;
    --al:        #DADCE0;
    --am:        #1A73E8;
    --ad:        #70757A;
    --text:      #202124;
    --sub:       #5F6368;
    --icon:      #3C4043;
    --white:     #FFFFFF;
    --shadow:    rgba(0,0,0,0.08);
    --shadow-md: rgba(0,0,0,0.14);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    --elev-1:    0 1px 2px rgba(0,0,0,.06), 0 2px 5px rgba(0,0,0,.06);
    --elev-2:    0 1px 3px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.09);
    --elev-3:    0 4px 10px rgba(0,0,0,.10), 0 14px 32px rgba(0,0,0,.13);
    /* Modal/sheet depth — this family (photo editor, follow list, copy-conflict,
       reel player, replace-pin sheet) previously rolled five different one-off
       shadows for the same role. */
    --elev-4:    0 8px 20px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.22);
    --border-soft: rgba(0,0,0,.06);
    --accent-tint: rgba(26,115,232,.08);
    --accent-shadow: 0 4px 12px rgba(26,115,232,.20);
    --radius:    14px;
    --radius-sm: 10px;
    --transition: 0.18s ease;
    /* ── Motion tokens ───────────────────────────────────────────────────
       Durations + a small curated set of easing curves, so surfaces stop
       falling back to the browser's default `ease`. Use the --ease-* values
       as the EASING slot only (never inside --transition, which already
       carries a duration — see the .trip-pill delay bug this replaced). */
    --dur-fast:  0.14s;
    --dur-base:  0.22s;
    --dur-slow:  0.32s;
    /* Decelerate — things entering/settling. */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    /* Standard — state changes both ways. */
    --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
    /* Accelerate — things leaving. */
    --ease-in:    cubic-bezier(0.4, 0, 0.7, 1);
    /* iOS sheet curve — large surfaces travelling a long distance. */
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Override every cream/old-palette variable that V1 set globally — scoped to body.v2
   so V1 at "/" is completely unaffected. */
body.v2 {
    --yellow:        #DADCE0;
    --peach:         #DADCE0;
    --sky:           #DADCE0;
    --blue:          #1A73E8;
    --dark:          #202124;
    --btn-primary:      #1A73E8;
    --ocean-teal:       #1A73E8;
    --deep-teal:        #DADCE0;
    --dark-teal:        #F1F3F4;
    --midnight:         #F1F3F4;
    --navy-blue:        #FFFFFF;
    --interactive-blue: #1A73E8;
    --bg-base:          #F1F3F4;
    --bg-surface:       #FFFFFF;
    --bg-input:         #F1F3F4;
    --bg-card-deep:     #FFFFFF;
    --bg-card-hover:    #F1F3F4;
    --text-primary:     #202124;
    --text-secondary:   #5F6368;
    --color-secondary:  #1A73E8;
    --color-logo-dot:   #1A73E8;
    --color-interactive:#1A73E8;
    --color-bg-main:    #F1F3F4;
    --color-bg-card:    #FFFFFF;
    --color-bg-card-deep: #F1F3F4;
    --color-bg-input:   #F1F3F4;
    --color-text-main:  #202124;
    --color-text-muted: #5F6368;
    --color-border:     #DADCE0;
}

/* ── Dark mode — Google Maps palette ── */
body.v2.dark {
    --bg:        #2D2F33;
    --al:        #3C3E42;
    --am:        #8AB4F8;
    --ad:        #9AA0A6;
    --text:      #E8EAED;
    --sub:       #9AA0A6;
    --icon:      #DADCE0;
    --white:     #1B1D21;
    --shadow:    rgba(0,0,0,0.34);
    --shadow-md: rgba(0,0,0,0.46);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.46), 0 1px 3px rgba(0,0,0,0.34);
    --elev-1:    0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    --elev-2:    0 1px 3px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
    --elev-3:    0 4px 12px rgba(0,0,0,.44), 0 16px 36px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);
    --elev-4:    0 8px 22px rgba(0,0,0,.52), 0 26px 64px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
    --border-soft: rgba(255,255,255,.08);
    --accent-tint: rgba(138,180,248,.14);
    --accent-shadow: 0 4px 12px rgba(138,180,248,.24);
    --yellow:        #3C3E42;
    --peach:         #3C3E42;
    --sky:           #3C3E42;
    --blue:          #8AB4F8;
    --dark:          #E8EAED;
    --btn-primary:      #8AB4F8;
    --ocean-teal:       #8AB4F8;
    --deep-teal:        #3C3E42;
    --dark-teal:        #2D2F33;
    --midnight:         #2D2F33;
    --navy-blue:        #1B1D21;
    --interactive-blue: #8AB4F8;
    --bg-base:          #2D2F33;
    --bg-surface:       #1B1D21;
    --bg-input:         #3C3E42;
    --bg-card-deep:     #1B1D21;
    --bg-card-hover:    #3C3E42;
    --text-primary:     #E8EAED;
    --text-secondary:   #9AA0A6;
    --color-secondary:  #8AB4F8;
    --color-logo-dot:   #8AB4F8;
    --color-interactive:#8AB4F8;
    --color-bg-main:    #2D2F33;
    --color-bg-card:    #1B1D21;
    --color-bg-card-deep: #3C3E42;
    --color-bg-input:   #3C3E42;
    --color-text-main:  #E8EAED;
    --color-text-muted: #9AA0A6;
    --color-border:     #3C3E42;
}
/* Dark mode — element overrides */
body.v2.dark .float-tab { background: #2D2F33; color: #DADCE0; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
body.v2.dark .float-tab i { color: #9AA0A6; }
body.v2.dark .float-tab--active { background: color-mix(in srgb, var(--am) 22%, var(--white)); color: var(--am); box-shadow: var(--accent-shadow); }
body.v2.dark .float-tab--active i { color: var(--am); }
body.v2.dark .reel-popup-overlay::before { background: rgba(0,0,0,0.70); }
body.v2.dark .section-menu-popup { background: #2D2F33; border-color: #3C3E42; }
body.v2.dark .reels-toolbar-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .add-reel-input { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .add-reel-folder-select { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .iw-meta-link { color: #8AB4F8; }
body.v2.dark .date-day { color: #DADCE0 !important; }
body.v2.dark .date-label { color: #DADCE0 !important; }
body.v2.dark .trip-pill-meta { color: #BDC1C6; }
body.v2.dark .trip-pill-arrow { color: #BDC1C6 !important; }
body.v2.dark .reels-section-title { color: #E8EAED; }
body.v2.dark .reels-section-count { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-counter { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .feed-platform { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-popup-notes-pill { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .sheet-title { color: #E8EAED !important; }
body.v2.dark .sheet-close-btn { color: #E8EAED !important; }
body.v2.dark .card-title-row strong { color: #E8EAED !important; }
body.v2.dark .card-edit-btn { color: #BDC1C6 !important; }
body.v2.dark .alldays-count { color: #BDC1C6; }
body.v2.dark .reel-name { color: #E8EAED; }
body.v2.dark .reel-popup-note { color: #E8EAED; }
body.v2.dark .reel-popup-close { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-popup-close i { color: #E8EAED; }
body.v2.dark .settings-close { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .time-badge { background: #3C3E42 !important; color: #E8EAED !important; }
body.v2.dark .sidebar-toggle-btn { color: #BDC1C6 !important; }
body.v2.dark .trip-pill { background: var(--white); border-color: var(--color-border); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
body.v2.dark .trip-pill-name { color: #E8EAED; }
body.v2.dark .acct-info-name { color: #E8EAED; }
body.v2.dark .acct-info-email { color: #9AA0A6; }
body.v2.dark .acct-item { color: #E8EAED; }
body.v2.dark .acct-item i { color: #9AA0A6; }
body.v2.dark .reel-tile { border-color: #3C3E42; }
body.v2.dark .reel-tile-label { color: #fff; }
body.v2.dark .sheet-handle { background: #1B1D21; }
@media (max-width: 768px) {
    body.v2.dark #itinerary-panel { box-shadow: 0 -20px 48px rgba(0,0,0,0.7), 0 -6px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
}
body.v2.dark .sheet-handle .handle-bar { background: #5F6368; }
body.v2.dark .pin-inline-btn { color: #8AB4F8; }
body.v2.dark .reel-header { background: #1B1D21; border-color: #3C3E42; }
body.v2.dark .reel-card { background: #1B1D21; border-color: #3C3E42; }
/* Match .trip-pill's dark tone (var(--white), #1B1D21) — noticeably darker
   than --color-bg-card-deep (#3C3E42), which read as too light here. */
body.v2.dark .alldays-date-header { color: #E8EAED; background: #1B1D21; border-color: var(--color-border); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
body.v2.dark .location-item.itinerary-card { background: var(--white) !important; border-color: var(--color-border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
body.v2.dark .date-block-header { background: #2D2F33 !important; border-color: #3C3E42 !important; }
body.v2.dark .edit-bar-buttons { box-shadow: 0 -4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
body.v2.dark .date-block { background: var(--color-bg-card-deep) !important; border-color: var(--color-border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
body.v2.dark .sheet-close-btn { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .sheet-pill-btn { background: #3C3E42 !important; border-color: #5F6368 !important; color: #E8EAED !important; }
body.v2.dark .sheet-pill-btn i { color: #E8EAED !important; }
body.v2.dark .icon-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .sort-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .route-btn { background: #3C3E42 !important; border-color: #5F6368 !important; color: #E8EAED !important; }
body.v2.dark .route-btn i { color: #E8EAED !important; }

/* Mobile-width shell — 430px centered, dark side bars on desktop */
body.v2 {
    background: #0F172A;
    justify-content: center;
}

/* Hide ALL Google Maps native UI — we provide our own buttons */
body.v2 .gm-style-mtc,
body.v2 .gm-style-mtc-bbw,
body.v2 .gm-fullscreen-control,
body.v2 .gm-svpc,
body.v2 .gm-bundled-control,
body.v2 .gm-bundled-control-on-bottom,
body.v2 .gmnoprint,
body.v2 button[title="Show street map"],
body.v2 button[title="Show satellite imagery"],
body.v2 button[title="Toggle fullscreen view"],
body.v2 button[jsaction="mouseup:mbr"],
body.v2 .gm-control-active { display: none !important; }

/* Keep only Google attribution / copyright */
body.v2 .gm-style-cc { display: flex !important; }

/* Map fills centered column */
body.v2 #map-container {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: max(0px, calc(50% - 215px)) !important;
    right: max(0px, calc(50% - 215px)) !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0;
}
/* Admin Mode banner (style.css companion to theme.js's #admin-mode-banner,
   36px tall) pushes the map/topbar down instead of overlapping them — the
   banner used to sit at z-index 9999 directly over #topbar (z-index 25). */
body.v2.admin-banner-active #map-container {
    top: 36px !important;
    height: calc(100% - 36px) !important;
}

/* ── Top bar: All (left) + Right cluster ── */
#topbar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 25; /* Higher than #pac-input's z-index 20 */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}
#topbar > * { pointer-events: auto; }

/* "All" pill */
.all-pill {
    background: var(--white);
    border: none;
    border-radius: 50px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    box-shadow: 0 2px 12px var(--shadow-md);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.all-pill:active { background: var(--al); transform: scale(0.97); }
.all-pill.active { background: var(--am); color: var(--white); }

/* Left & Right clusters — vertical stack */
.top-left,
.top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

body.v2 .top-left .account-menu {
    left: 0;
    right: auto;
}
/* The settings menu drops from the settings button (the 2nd button in the
   top-left stack), so it opens a row lower than the profile menu. */
body.v2 .top-left #settings-menu { top: 108px; }

/* Hide the legacy auth-chip-mobile element — replaced by auth-btn */
body.v2 #auth-chip-mobile { display: none !important; }

/* The Pins tab uses #pins-sort-btn for its Edit control; the shared
   #itinerary-add-btn must never appear here (it kept leaking as a duplicate
   "Edit"). Force it hidden whenever the Pins tab is active — declarative, so no
   JS timing race can re-show it. (Reels legitimately reuses the button, so this
   is scoped to page-saved only.) */
body.v2[data-main-tab="page-saved"] #itinerary-add-btn { display: none !important; }

/* Icon buttons — auth, search, location, terrain */
.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border-soft);
    box-shadow: var(--elev-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
/* Deals toggle (the orange star map control) — orange star when the Klook
   layer is shown, muted grey when hidden. */
/* ID selector so it beats `body.v2 .icon-btn i { color: inherit !important }`. */
#klook-toggle-btn i { font-size: 20px; color: #FF7A00 !important; }
#klook-toggle-btn.deals-off i { color: var(--sub, #94a3b8) !important; }
.icon-btn:active {
    background: var(--al);
    transform: translateY(1px) scale(0.97);
    box-shadow: var(--elev-1);
}
.icon-btn.active {
    background: var(--am);
    border-color: var(--am);
    color: #FFFFFF;
    box-shadow: var(--accent-shadow);
}

/* SVG icons inside buttons */
.icon-btn svg { pointer-events: none; }

/* Override V1 #current-location-btn ID rule (ID beats class).
   In v2 the button lives inside .top-right (position:static), so the
   mobile sheet-peek display:none rule must not apply — visibility is
   controlled solely by _setMapControlsHidden on the parent container. */
body.v2 #current-location-btn {
    display: flex !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--al) !important;
    color: var(--icon) !important;
    font-size: 19px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    transition: all var(--transition) !important;
    transform: none !important;
}
body.v2 #current-location-btn:hover {
    background: var(--white) !important;
    color: var(--icon) !important;
    transform: none !important;
    border-color: var(--al) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
body.v2 #current-location-btn:active {
    background: var(--al) !important;
    transform: scale(0.95) !important;
}

/* Auth circle */
.auth-circle { font-size: 20px; }
.auth-circle.signed-in {
    background: var(--al);
    border-color: var(--am);
    color: var(--text);
}

/* ── Notifications ── */
.notif-btn {
    position: relative;
    font-size: 19px;
}
/* While the search bar is open, hide the bell too (matches how the other top
   controls step aside for search). */
body.search-open #notif-btn { display: none !important; }
.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    line-height: 1;
}
.notif-dropdown {
    /* Fixed to the viewport (its .top-left parent is a narrow column, so an
       absolute width bled off the right). left+right give equal screen padding. */
    position: fixed;
    top: 98px;          /* under the account circle (44) + gap (10) + bell (44) */
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 440px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: var(--elev-3);
    z-index: 400;
    -webkit-overflow-scrolling: touch;
}
.notif-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
    padding: 16px 18px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--al);
    /* Title LEFT, actions right. It used to be a centred title with the single
       action absolutely positioned over it; a second action ("Clear all") made
       that overlap the title at 390px, so the row is a plain flex layout now. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notif-dropdown-title { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}
.notif-clearall-btn,
.notif-markread-btn {
    position: static;
    transform: none;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--am);
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--dur-fast) var(--ease-std);
}
.notif-markread-btn:active, .notif-clearall-btn:active { opacity: 0.6; }
/* "Clear all" is destructive-ish (it hides items rather than acting on them), so
   it reads muted next to the accent-coloured "Mark all read". */
.notif-clearall-btn { color: var(--sub); }
/* Per-row clear ×. Sits at the right edge of an item; the row itself stays the
   click target for opening, so this stops propagation in its handler. */
.notif-clear-x {
    /* Last child of the already-flex .notif-item-body, pushed right with auto
       margin — keeps invite rows (which stack their action buttons below the
       body) untouched, and needs no :has(). */
    flex: none; align-self: center; margin-left: auto;
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: none; color: var(--ad);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.notif-clear-x i { font-size: 13px; color: var(--ad) !important; }
.notif-clear-x:active { background: var(--bg); }
/* Notification filter tabs (All / Boards / Follows) */
/* Four tabs (All / Trips / Boards / Follows) have to fit a 360px phone, so they
   share the row equally rather than sizing to their labels — at the old
   label-width padding they overflowed by ~85px. overflow-x is a safety net for
   larger system font sizes; it should never actually engage. */
.notif-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 10px;
    border-bottom: 1px solid var(--al);
    background: var(--white);
    overflow-x: auto;
    scrollbar-width: none;
}
.notif-tabs::-webkit-scrollbar { display: none; }
.notif-tab {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 7px 8px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: var(--sub);
    white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.notif-tab--active { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.notif-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
    flex-shrink: 0;
    font-size: 10px; font-weight: 800; line-height: 1;
    background: var(--bg); color: var(--sub);
}
.notif-tab--active .notif-tab-badge { background: rgba(255,255,255,0.28); color: #fff; }
.notif-list { }
.notif-section-label {
    padding: 12px 18px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sub);
}
.notif-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--sub);
    font-size: 13px;
}
.notif-item {
    padding: 10px 18px;
    border-bottom: 1px solid var(--al);
}
.notif-item:last-child { border-bottom: none; }
.notif-item-body { display: flex; gap: 10px; align-items: flex-start; }
.notif-item-icon { font-size: 17px; color: var(--am); flex-shrink: 0; margin-top: 1px; }
.notif-item-title { font-size: 13px; color: var(--text); line-height: 1.45; }
.notif-item-sub { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.notif-item-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: var(--am); color: #fff; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.notif-invite-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}
.notif-accept-btn, .notif-reject-btn {
    border-radius: 999px;
    padding: 6px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--al);
    -webkit-tap-highlight-color: transparent;
}
.notif-accept-btn { background: var(--am); border-color: var(--am); color: #fff; }
.notif-reject-btn { background: var(--white); color: var(--sub); }

/* ── Public Profile panel ── */
/* Backdrop; the panel itself is sized to sit in the map band between the
   topbar (~14+44px) and the bottom tab pills (~80px), centered, phone-width. */
.profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease;
}
.profile-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 76px;
    bottom: 96px;
    width: min(430px, calc(100vw - 24px));
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    box-shadow: var(--elev-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.18s ease;
}
.profile-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
/* Shared-collection title — centred on the SAME row as the close/search
   buttons (between them), not below in the body. */
.profile-head-title {
    position: absolute;
    top: 12px;
    left: 52px;
    right: 52px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 1;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-head-title .pht-text {
    overflow: hidden; text-overflow: ellipsis; color: var(--text);
    /* White pill so the username reads over the gradient cover behind it. */
    background: var(--white); padding: 5px 16px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14); max-width: 100%;
}
.profile-head-title .pht-count {
    flex-shrink: 0; background: var(--am); color: #fff;
    border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 11px; padding: 2px 8px; min-width: 20px; text-align: center;
}
/* Left spacer matches the count pill so the title stays centred. */
.profile-head-title .pht-balance { flex-shrink: 0; min-width: 27px; }
/* Shared reels: no folder chrome — just the grid. */
.profile-search-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
/* Round header action button (top-right) — e.g. shared-trip "Copy to itinerary".
   Accent-coloured so it reads as the primary action. */
.profile-head-action {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--am); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.profile-head-action:active { opacity: 0.85; }
.profile-search-inputwrap {
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    margin: 12px 14px 4px; padding: 9px 14px;
    background: var(--bg); border: 1px solid var(--al); border-radius: 12px;
    color: var(--sub);
}
.profile-search-inputwrap i { font-size: 17px; }
.profile-search-input {
    flex: 1; border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    margin: 0 !important; min-height: 0 !important; height: 24px; padding: 0 !important;
}
.profile-char-count { text-align: right; font-size: 11px; color: var(--sub); margin: 2px 2px 8px; }
/* Profile search: Clear at the right end of the RECENT label + recent rows */
.follow-list-header-actions { display: flex; align-items: center; gap: 10px; }
.profile-recents-clear { background: none; border: none; cursor: pointer; color: var(--am); font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif; -webkit-tap-highlight-color: transparent; }
.profile-recents-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sub); padding: 12px 14px 8px;
}
.profile-recents-label .profile-recents-clear { text-transform: none; letter-spacing: 0; }
/* Centered header (Find profiles): X floats on the left, title centred. */
.follow-list-header--centered { position: relative; }
.follow-list-header--centered .follow-list-close { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); order: 0 !important; margin-right: 0 !important; }
.follow-list-header--centered .follow-list-title {
    position: absolute; left: 0; right: 0; padding: 0 48px;
    text-align: center; pointer-events: none;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--text);
}
/* Each result / recent is its own bar, matching the profile collection cards.
   Compounded with .follow-list-row so this wins over that rule's own padding
   (it is defined later in the file) without needing !important. */
.follow-list-row.profile-search-row {
    display: flex; align-items: center;
    padding: 0; margin-bottom: 8px; overflow: hidden;
    background: var(--bg); border: 1px solid var(--al); border-radius: 14px;
}
.follow-list-row.profile-search-row:active { background: var(--al); }
.profile-search-row-main { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; padding: 11px 6px 11px 14px; cursor: pointer; }
.profile-recent-x { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--sub); font-size: 15px; padding: 8px 12px; }
.profile-recent-x:active { color: var(--text); }
/* Shared trip / pin-list drill-ins: the header buttons sit at top:12px and are
   32px tall, so .profile-body's 52px padding left only 8px between the header
   and the first card. Reels keep the tight spacing — that view has its own
   coloured folder header directly beneath. */
.profile-body:not(.profile-body--reels) #profile-collection-items { padding-top: 16px; }
/* Places autocomplete dropdown must sit above the profile panel (z 9500+). */
.pac-container { z-index: 100000 !important; }
.profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 52px 22px 24px; /* clears the top-left close + top-right search buttons */
    -webkit-overflow-scrolling: touch;
}
.profile-loading, .profile-empty {
    text-align: center;
    color: var(--sub);
    font-size: 13px;
    padding: 24px 8px;
}
/* View mode */
.profile-avatar {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin: 4px auto 12px;
    border: 3px solid var(--al);
}
/* Own-profile avatar with an edit pencil */
.profile-avatar-wrap { position: relative; display: inline-block; margin: 4px auto 12px; }
.profile-avatar-wrap .profile-avatar { margin: 0; }
/* Follow badge on someone else's avatar — same corner slot as the own-profile
   edit pencil, so the two never need to coexist. BOTH states are a filled
   circle: the earlier "white chip once following" sat on the avatar's white
   ring and read as a cut-out rather than a control. Accent + to follow, neutral
   slate ✓ once following, so the state change is obvious without the badge
   fighting the ring. */
.profile-avatar-follow {
    position: absolute; right: 0; bottom: 4px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--am); color: #fff;
    border: 3px solid var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.12s ease;
}
/* Regular weight only — index.html loads Phosphor's regular + fill sets, and
   `check` has no fill variant, which is why ph-fill ph-check was rendering a
   fallback box. Sized up a little to carry weight at this diameter. */
.profile-avatar-follow i { color: #fff !important; font-size: 18px; }
.profile-avatar-follow.following { background: #5F6368; }
.profile-avatar-follow.following i { color: #fff !important; font-size: 17px; }
.profile-avatar-follow:active { transform: scale(0.92); }
.profile-avatar-follow:disabled { opacity: 0.6; }
.profile-avatar-edit {
    position: absolute; right: -2px; bottom: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    /* White chip, blue icon (merged Edit-profile / change-photo button). */
    background: var(--white); color: var(--am); border: 1px solid var(--border-soft);
    box-shadow: 0 1px 5px rgba(0,0,0,0.22);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; padding: 0;
}
/* Profile ⋮ menu (Edit folders / Share) — floats over the profile panel. */
.profile-more-menu {
    position: fixed; z-index: 100010;
    background: var(--white); border: 1px solid var(--border-soft);
    border-radius: 12px; box-shadow: var(--elev-3);
    min-width: 168px; overflow: hidden; padding: 4px;
    animation: fadeIn 0.15s ease;
}
.profile-more-menu .acct-item { border-radius: 8px; min-height: 44px; }
/* Change-photo row at the top of the Edit Profile panel. */
.profile-edit-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 16px; }
.profile-changephoto-btn { background: none; border: none; color: var(--am); font-weight: 700; font-size: 13px; font-family: 'Outfit', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ── Profile: gradient cover + centred hero ─────────────────────────────── */
.icon-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.icon-avatar i { color: #fff !important; line-height: 1; }
/* One tall gradient block holding the whole profile header (avatar, socials,
   name, location, stats) — extends down to just above the tabs. Full-bleed to
   the panel top + edges; the panel's overflow:hidden clips the top corners. */
.profile-cover-block {
    position: relative; /* anchors the socials row under the share button */
    margin: -52px -22px 0;
    padding: 58px 20px 18px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    color: #fff;
}
/* The avatar now sits alone and centred — socials moved up under the share
   button, Follow moved down into the stats row. */
.profile-hero-row { display: flex; align-items: center; justify-content: center; width: 100%; gap: 10px; }
.profile-cover-block .profile-avatar-wrap { margin: 0; flex-shrink: 0; }
.profile-cover-block .profile-avatar {
    width: 92px; height: 92px; border-radius: 50%;
    border: 4px solid var(--white); box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    object-fit: cover; background: var(--bg);
}
/* Socials: horizontal row, centred. */
.profile-socials { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
/* Pinned under the top-right share button (top 12px + 32px tall + 8px gap).
   right:13px centres the 30px icons on the 32px button above them. */
.profile-socials--top {
    position: absolute; top: 52px; right: 13px; z-index: 3;
    justify-content: flex-end;
}
/* The socials sit level with the top of the centred 92px avatar, so on narrow
   phones three of them would otherwise run into it — shrink to keep clearance. */
@media (max-width: 380px) {
    .profile-socials--top { gap: 4px; }
    .profile-socials--top .profile-social-link { width: 26px; height: 26px; }
    .profile-socials--top .profile-social-link i { font-size: 14px; }
}
@media (max-width: 340px) {
    .profile-socials--top { gap: 3px; right: 11px; }
    .profile-socials--top .profile-social-link { width: 24px; height: 24px; }
    .profile-socials--top .profile-social-link i { font-size: 13px; }
}
.profile-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--white); color: var(--am);
    text-decoration: none; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.profile-social-link i { font-size: 16px; }
.profile-social-link:active { background: var(--al); }
/* Name — white, close under the avatar; pencil floats to its right. */
.profile-hero-name { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.profile-name-edit { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #fff; font-size: 15px; padding: 2px; display: inline-flex; -webkit-tap-highlight-color: transparent; }
/* Location, under the name. */
.profile-hero-loc-under { display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,0.92); font-size: 13px; margin-top: 5px; text-shadow: 0 1px 3px rgba(0,0,0,0.25); max-width: 100%; }
.profile-hero-loc-under i { font-size: 14px; flex-shrink: 0; }
.profile-stats { display: flex; justify-content: center; gap: 30px; margin: 14px 0 2px; }
.pstat { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: none; cursor: pointer; padding: 0; }
.pstat b { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; color: var(--text); }
.pstat span { font-size: 12px; color: var(--sub); }
/* On the gradient cover block the stats read white. */
.profile-cover-block .pstat b { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.profile-cover-block .pstat span { color: rgba(255,255,255,0.85); }
/* Look editor: segmented toggle to switch which target the colour grid edits. */
.look-target-toggle { display: flex; background: var(--bg); border: 1px solid var(--al); border-radius: 11px; padding: 3px; margin: 10px 0 8px; }
.look-target-toggle button {
    flex: 1; border: none; background: none; padding: 8px 6px; border-radius: 8px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; color: var(--sub);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.look-target-toggle button.active { background: var(--white); color: var(--text); box-shadow: var(--elev-1); }

/* Edit Profile — cover + icon pickers */
/* Two-tone preview: a mini cover band with the avatar straddling its bottom. */
.profile-look-preview-wrap { position: relative; height: 68px; border-radius: 14px; margin: 6px 0 46px; }
.profile-look-preview {
    position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
    width: 70px; height: 70px; border-radius: 50%;
    border: 4px solid var(--white); box-shadow: var(--elev-2);
}
.profile-look-preview i { font-size: 34px; }
/* Colour / icon grids scroll inside capped containers so Save/Cancel stay in
   view; the footer sticks to the bottom of the scrolling panel. */
.profile-scroll-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#profile-avatar-grad-grid, #profile-cover-grad-grid { max-height: 92px; }
#profile-icon-grid.profile-scroll-grid { max-height: 148px; }
.profile-look-actions {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--white); padding: 12px 0 4px; margin-top: 8px;
    border-top: 1px solid var(--al);
}
.profile-grad-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin: 6px 0 6px; }
.grad-swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.grad-swatch.active { border-color: var(--white); box-shadow: 0 0 0 2px var(--am); }
.profile-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 8px; }
.icon-choice {
    aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border-soft);
    background: var(--bg); color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.icon-choice i { font-size: 21px; }
.icon-choice.active { border-color: var(--am); background: color-mix(in srgb, var(--am) 12%, transparent); color: var(--am); }

/* White Share button in the profile header (over the gradient cover). */
.profile-head-action.profile-head-action--white { background: var(--white) !important; border: 1px solid var(--border-soft) !important; color: var(--text) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.16) !important; }
/* Account-button icon avatar — fills the whole button (covers its border) so
   it reads as a solid gradient circle, no white ring or gap. */
#auth-btn { position: relative; overflow: hidden; }
.auth-icon-avatar { position: absolute; inset: -2px; border-radius: 50%; }
.auth-icon-avatar i { font-size: 23px; color: #fff !important; }

/* Socials stack vertically to the left of the avatar (up to 3). */

/* Edit-folders FAB — pinned to the panel's bottom-right corner; white button,
   same size as the header Share button. */
.profile-folders-fab {
    position: absolute; right: 16px; bottom: 16px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--white); color: var(--am); border: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.16);
    -webkit-tap-highlight-color: transparent;
}
.profile-folders-fab:active { transform: scale(0.94); }
/* Photo editor (zoom + pan crop) */
.photo-editor-overlay {
    /* Above the trip-cover picker (z 100000) it opens from — otherwise the crop
       panel rendered BEHIND the "Choose a picture" list. */
    position: fixed; inset: 0; z-index: 100002;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.photo-editor-sheet {
    width: min(360px, calc(100vw - 24px));
    background: var(--white); border-radius: 18px; padding: 14px 16px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow: var(--elev-4);
    animation: popIn var(--dur-base) var(--ease-out);
}
.photo-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text);
}
.photo-editor-header span { font-size: 15px; }
.photo-editor-cancel, .photo-editor-save {
    background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 700;
    font-family: 'Outfit', sans-serif; padding: 4px 2px;
}
.photo-editor-cancel { color: var(--sub); }
.photo-editor-save { color: var(--am); }
.photo-editor-save:disabled { opacity: 0.5; }
.photo-editor-stage {
    position: relative; width: 300px; height: 300px; max-width: 78vw; max-height: 78vw;
    overflow: hidden; border-radius: 14px; background: #111;
    touch-action: none; cursor: grab; user-select: none;
}
.photo-editor-stage:active { cursor: grabbing; }
#photo-editor-img { position: absolute; user-select: none; pointer-events: none; }
/* Circular crop window: a 240px hole via a huge surrounding shadow. */
.photo-editor-ring {
    position: absolute; top: 50%; left: 50%; width: 240px; height: 240px;
    max-width: 62.4vw; max-height: 62.4vw;
    transform: translate(-50%, -50%); border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0,0,0,0.55); pointer-events: none;
    border: 2px solid rgba(255,255,255,0.8);
}
.photo-zoom-slider { width: 100%; accent-color: var(--am); }
.photo-editor-pick {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    color: var(--am); font-weight: 700; font-size: 13.5px; font-family: 'Outfit', sans-serif;
}
.profile-avatar--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--sub);
    font-size: 34px;
}
.profile-name {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}
.profile-handle-row {
    text-align: center;
    font-size: 13px;
    color: var(--sub);
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}
.profile-loc { display: inline-flex; align-items: center; gap: 3px; }
.profile-loc i { font-size: 13px; }
.profile-bio {
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    margin: 12px 4px 0;
}
.profile-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 16px 0 4px;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.profile-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sub);
    margin: 22px 0 10px;
}
/* ── Instagram-style profile layout ─────────────────────────────────────── */
.ig-top { display: flex; align-items: center; gap: 18px; margin: 6px 0 12px; }
.ig-top .profile-avatar, .ig-top .profile-avatar-wrap { margin: 0; flex-shrink: 0; }
.ig-top .profile-avatar { width: 76px; height: 76px; }
.ig-stats { display: flex; flex: 1; justify-content: space-around; }
.ig-stat {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--text); font-family: 'Inter', sans-serif;
}
.ig-stat b { font-size: 17px; font-weight: 700; }
.ig-stat span { font-size: 12.5px; color: var(--sub); }
.ig-identity { text-align: left; margin-bottom: 12px; }
.ig-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
/* Location shown inline next to the nickname (smaller, grey, normal weight). */
.ig-name-loc { font-weight: 500; font-size: 12.5px; color: var(--sub); }
.ig-name-loc .profile-loc { display: inline-flex; align-items: center; gap: 3px; }
.ig-handle { font-size: 12.5px; color: var(--sub); margin-top: 1px; }
.ig-bio { font-size: 13.5px; color: var(--text); margin-top: 5px; line-height: 1.45; }
.ig-addbio { background: none; border: none; padding: 5px 0 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--am); }
.ig-btns { display: flex; gap: 8px; margin-bottom: 4px; }
.ig-btn {
    flex: 1; padding: 8px 10px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--al); color: var(--text);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
    transition: filter var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.ig-btn:active { filter: brightness(0.95); transform: scale(0.97); }
.ig-btn--primary { background: var(--am); color: #fff; }
.ig-btn--primary.following { background: var(--al); color: var(--text); }
/* Icon-only tab row */
.ig-tabs .profile-tab { flex: 1; padding: 10px 0; font-size: 0; }
.ig-tabs .profile-tab i { font-size: 20px; }
/* Follower / following counts + Follow button (legacy centred variant) */
.profile-stats { display: flex; justify-content: center; gap: 28px; margin: 14px 0 4px; }
/* Other users' profiles: Follow sits at the left end of the row, on the same
   baseline as the counts. Tighter gap so the three items still read as one row
   on a narrow phone. Declared after both .profile-stats rules so it wins. */

/* flex:0 0 auto overrides .ig-btn's flex:1, which would otherwise stretch the
   button across the row and push the counts off-centre. */

.profile-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: none; border: none; cursor: pointer; padding: 2px 6px;
    color: var(--text); font-family: 'Inter', sans-serif;
}
.profile-stat b { font-size: 16px; font-weight: 700; }
.profile-stat span { font-size: 11.5px; color: var(--sub); }
.profile-follow-btn {
    display: block; margin: 10px auto 2px; min-width: 140px;
    padding: 9px 20px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--am); color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 13.5px; font-weight: 700;
}
.profile-follow-btn.following { background: var(--al); color: var(--text); }
.profile-follow-btn:disabled { opacity: 0.6; }
/* Reels / Trips / Pins tabs */
.profile-tabs {
    display: flex; gap: 4px; margin: 20px 0 12px;
    border-bottom: 1px solid var(--al);
}
.profile-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 9px 4px;
    color: var(--sub); font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--dur-base) var(--ease-std), border-bottom-color var(--dur-base) var(--ease-std);
}
.profile-tab.active { color: var(--am); border-bottom-color: var(--am); }
.profile-tab:not(.active):active { color: var(--text); }
.profile-tab i { font-size: 15px; }
/* Follow list overlay */
.follow-list-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.follow-list-sheet {
    box-sizing: border-box;
    width: min(400px, calc(100vw - 24px)); max-height: 70vh;
    display: flex; flex-direction: column;
    background: var(--white); border-radius: 16px; overflow: hidden;
    box-shadow: var(--elev-4);
    animation: popIn var(--dur-base) var(--ease-out);
}
/* Find profiles: a fixed-size panel. Without a set height the sheet resizes on
   every keystroke as results come and go, which reads as the panel jumping. */
.follow-list-sheet--fixed { height: min(70vh, 540px); }
.follow-list-sheet--fixed .follow-list-body { flex: 1; padding: 4px 14px 12px; }
.follow-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--text);
}
/* Standard white circle close button (matches settings / profile). */
.follow-list-close {
    background: var(--bg); border: 1px solid var(--al); border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    color: var(--text); font-size: 16px; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
/* overflow-y:auto alone computes overflow-x to auto, so the rows below must not
   overhang by even a pixel or the whole sheet gains a sideways scrollbar. */
.follow-list-body { overflow-y: auto; overflow-x: hidden; padding: 4px 8px 12px; }
.follow-list-row {
    /* border-box: there's no global reset, and width:100% + horizontal padding
       otherwise overflows the body by exactly the padding (the side scroll). */
    box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: none; background: none; cursor: pointer; text-align: left;
    border-radius: 12px;
}
.follow-list-row:active { background: var(--al); }
.follow-list-row img, .follow-list-avatar-blank {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--al); color: var(--sub);
}
.follow-list-meta { display: flex; flex-direction: column; min-width: 0; }
.follow-list-meta b { font-size: 14px; color: var(--text); }
.follow-list-meta small { font-size: 12px; color: var(--sub); }
.profile-collections { display: flex; flex-direction: column; gap: 8px; }
.profile-collection-card {
    /* Same border-box reason as .follow-list-row: width:100% plus padding and a
       border otherwise overhangs and gives the profile body a side scroll. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--al);
    background: var(--bg);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std),
                box-shadow var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.profile-collection-card:active { background: var(--al); transform: scale(0.985); box-shadow: var(--elev-1); }
.profile-collection-card > i { font-size: 20px; color: var(--am); flex-shrink: 0; }
.profile-collection-arrow { margin-left: auto; color: var(--sub); font-size: 16px; }
/* Collection drill-in view (inside the profile panel) */
.profile-collection-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.profile-back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--al); color: var(--icon);
    cursor: pointer; flex-shrink: 0; font-size: 15px;
}
.profile-collection-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); }
.profile-reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-reel-tile { aspect-ratio: 9 / 14; border-radius: 10px; overflow: hidden; background: var(--al); cursor: pointer; position: relative; }
.profile-item-list { display: flex; flex-direction: column; gap: 6px; }
.profile-item-row { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1); }
.profile-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile-item-sub { font-size: 12px; color: var(--sub); margin-top: 1px; }
.profile-collection-meta { min-width: 0; }

/* ── Shared pin list (read-only) — cards reuse the Pins-tab .saved-card
   component (see _pickerPinCardInner) + a "Save list" header action. ─────── */
/* Cards are .location-item.saved-card (same as the Pins tab), which carry
   their own 8px margin-bottom — so no container gap (that would double it). */
.shared-pinlist { display: flex; flex-direction: column; gap: 0; }
/* .shared-pin-loc is also used by .saved-card-addr (the address row). */
.shared-pin-loc { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); }
.shared-pin-loc i { font-size: 13px; flex-shrink: 0; }
.shared-pin-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Flat pin-list "All" view: individual saved-card bars (no country groups). */
.pinlist-flat-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Saved-pin card redesign ──────────────────────────────────────────────
   Edge-to-edge square photo (flush to the card's left/top/bottom, type tag in
   its corner), name + 2-line address, a ⋮ menu top-right and a ▶ play button
   bottom-right. Zero card padding so the photo bleeds to the rounded edges; the
   text column carries its own padding. Scoped with :has() so only cards that
   actually contain the new bar are affected (not the itinerary pickers). */
body.v2 .location-item.saved-card:has(.saved-card-bar) {
    padding: 0 !important; position: relative;
}
/* Raise a card above the one below it while its ⋮ menu is open, so the dropdown
   (which extends past the short card) is never covered by the next card. */
body.v2 .location-item.saved-card:has(.saved-card-menu.open) { z-index: 30; }
.saved-card-bar { display: flex; align-items: stretch; gap: 0; position: relative; min-height: 100px; }
/* Photo: 100px-wide cover that STRETCHES to the full card height (align-self:
   stretch, not a fixed square) — a fixed 100px square floated centred in a
   taller card (2-line name + 3-line address) and left grey gaps above/below.
   Left corners rounded to the card radius (no card overflow:hidden needed, so
   the dropdown menu isn't clipped); right side is square against the text. */
.saved-card-photo {
    flex-shrink: 0; align-self: stretch; width: 100px; min-height: 100px; position: relative;
    overflow: hidden; background: var(--bg); cursor: pointer;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.saved-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.saved-card-photo-empty { background: color-mix(in srgb, var(--am) 8%, var(--bg)); }
/* Pin-type tag overlaid in the photo's bottom-right corner. */
.saved-card-typebadge {
    position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.saved-card-typebadge i { font-size: 15px; color: #3B82F6 !important; }
/* Text column: own padding; extra right padding clears the ⋮ / ▶ buttons. */
.saved-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 46px 12px 14px; }
.saved-card-name {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.22; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Address: smaller type so up to THREE lines fit, then ellipsis. */
.saved-card-addr { align-items: flex-start !important; font-size: 11.5px !important; }
.saved-card-addr i { margin-top: 2px; font-size: 12px; color: #EF4444 !important; }
.saved-card-addr span {
    white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.28; font-size: 11.5px;
}
/* ⋮ kebab button — top-right corner of the card. */
.saved-card-menu-btn {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: none; border-radius: 50%;
    background: transparent; color: var(--sub); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; z-index: 3;
}
.saved-card-menu-btn:active { background: var(--bg); }
/* Dropdown menu. */
.saved-card-menu {
    position: absolute; top: 40px; right: 8px; z-index: 20; min-width: 184px;
    background: var(--white); border: 1px solid var(--border-soft); border-radius: 12px;
    box-shadow: var(--elev-3); padding: 6px; display: none; flex-direction: column;
}
.saved-card-menu.open { display: flex; }
.saved-card-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: none;
    background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
    font-family: 'Inter', sans-serif; text-align: left; border-radius: 8px;
}
.saved-card-menu button i { font-size: 17px; color: var(--sub); flex-shrink: 0; }
.saved-card-menu button:active { background: var(--bg); }
.saved-card-menu .saved-card-menu-danger { color: #E5484D; }
.saved-card-menu .saved-card-menu-danger i { color: #E5484D; }
/* ▶ reels button — bottom-right corner of the card. Simple: white fill, grey
   outline, grey icon. A pin WITH reels shows a small accent dot. */
.saved-card-play {
    position: absolute; bottom: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid #c7ccd1; background: var(--white); color: #8B5CF6;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; z-index: 3;
}
body.v2.dark .saved-card-play { border-color: #3a3d42; color: #8B5CF6; }
.saved-card-play:active { transform: scale(0.94); }
/* Transparent dead-zone over the right button column: catches taps in the gaps
   AROUND the ⋮ / reel buttons (stopPropagation) so a near-miss doesn't open the
   card. Sits BELOW the buttons (z-index 2 < 3) so they stay clickable. */
.saved-card-actions-zone { position: absolute; top: 0; right: 0; bottom: 0; width: 50px; z-index: 2; }
.saved-card-play.has-reels { color: #8B5CF6; }
/* The Phosphor icon otherwise picks up a higher-specificity grey icon rule
   instead of the button's red — force it to inherit the button colour. */
.saved-card-play i { color: inherit !important; }
body.v2.dark .saved-card-play { background: var(--white); }

/* Save button in its "no changes yet" state — reads Cancel, muted styling. */
body.v2 .btn-save.btn-save--cancel, .btn-save.btn-save--cancel {
    background: var(--bg) !important; color: var(--sub) !important; border: 1px solid #c7ccd1 !important; box-shadow: none !important;
}

/* Hide the floating "Add pins" bar while any edit panel is open. */
body.card-edit-open #pins-add-floating { display: none !important; }

/* "Add to itinerary" / "Add to pin" picker cards adopt the Pins-tab card look
   (1:1 photo + type badge + name + address) via .saved-card-bar. The trailing
   "+" sits at the right with a little inset; the inline schedule form (which the
   zero-padding card would otherwise glue to the edges) gets its own padding. */
.itinerary-picker-row .picker-card-bar .picker-add-btn { right: 10px; }
.itinerary-picker-row:has(.saved-card-bar) .inline-schedule-form { padding: 0 14px 14px; }

/* The saved-pin card now has zero padding (flush photo), so the edit panel needs
   its own horizontal padding; the top border sits flush under the card bar as a
   full-width divider. */
body.v2 .location-item.saved-card:has(.saved-card-bar) .edit-form {
    padding: 12px 14px 14px !important; margin-top: 0 !important;
}
/* Beat the legacy centred `.saved-card .card-title-row` !important rules. */
body.v2 .saved-card .card-title-row.saved-card-bar {
    display: flex !important; align-items: stretch !important; justify-content: flex-start !important;
    gap: 0 !important; text-align: left !important; padding: 0 !important;
}
body.v2 .saved-card .saved-card-bar .saved-card-name {
    flex: initial !important; text-align: left !important; padding: 0 !important;
    white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden !important; text-overflow: ellipsis !important;
    font-size: 15px !important; line-height: 1.22 !important;
}
body.v2.dark .saved-card-menu { background: #1B1D21; }
body.v2.dark .saved-card-typebadge { background: rgba(30,32,36,.92); }

/* Shared-itinerary day pickers (All Days / Day 1 / Day 2 …) */
.shared-itin-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.shared-itin-days::-webkit-scrollbar { display: none; }
.shared-day-pill {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--sub);
    cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.shared-day-pill--active { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }

/* ── Shared itinerary (read-only) — same format as the in-app trip timeline
   (time chip + stop card + transport/time/directions leg rows), day/date
   hidden, with a Copy-to-itinerary action up top. ───────────────────────── */
.shared-itin-copybtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-bottom: 14px; padding: 12px;
    border: none; border-radius: 12px; cursor: pointer;
    background: var(--am); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
}
.shared-itin-copybtn:active { opacity: 0.9; }
.shared-itin-copybtn[disabled] { opacity: 0.7; cursor: default; }
.shared-itin-copybtn i { font-size: 17px; }

.shared-itin2 { display: flex; flex-direction: column; margin-top: 12px; }
.shared-itin-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px; background: var(--white);
    border: 1px solid var(--al); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.shared-itin-time {
    flex-shrink: 0; background: var(--text); color: var(--white);
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px;
    padding: 4px 10px; border-radius: 999px;
}
.shared-itin-cardname {
    flex: 1; text-align: center; min-width: 0;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Equal side columns shared by stop cards and leg rows so the transport icon
   aligns under the time chip and the name aligns with the leg-time. */
.sic-side { flex: 0 0 58px; display: flex; align-items: center; justify-content: center; }
/* leg row between two stops: transport icon · dashed line · time · dashed line · directions arrow */
.shared-itin-legrow { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.shared-itin-legicon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--sub);
}
.shared-itin-legicon i { font-size: 15px; }
.shared-itin-legline { flex: 1; height: 0; border-top: 1.5px dashed var(--al); }
.shared-itin-legtime {
    flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--al);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--sub);
}
.shared-itin-legdir {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--al); background: var(--white); color: var(--am);
    text-decoration: none;
}
.shared-itin-legdir i { font-size: 15px; }

/* Copy-to-itinerary name-clash prompt */
.copy-conflict-overlay {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: fadeIn 0.15s ease;
}
.copy-conflict-card {
    background: var(--white); border-radius: 18px; padding: 24px 22px 20px;
    width: min(340px, 100%); text-align: center; box-shadow: var(--elev-4);
    animation: popIn var(--dur-base) var(--ease-out);
}
.copy-conflict-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--text); padding: 0 4px; }
.copy-conflict-sub { font-size: 13px; color: var(--sub); margin: 8px 0 20px; }
.copy-conflict-actions { display: flex; gap: 12px; }
/* Yes/No variant has no sub-line, so the title sits directly above the buttons
   — give it breathing room (the conflict variant is spaced by its -sub margin). */
.copy-conflict-title + .copy-conflict-actions { margin-top: 22px; }
.copy-conflict-actions .ccb {
    flex: 1; padding: 13px; border-radius: 12px; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; border: 1px solid var(--al);
}
.ccb-new { background: var(--bg); color: var(--text); }
.ccb-replace { background: var(--am); color: #fff; border-color: var(--am); }
.copy-conflict-actions .ccb:active { opacity: 0.9; }
.ccb-cancel { margin-top: 18px; padding: 8px; background: none; border: none; cursor: pointer; color: var(--sub); font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.profile-collection-name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile-collection-sub { font-size: 12px; color: var(--sub); margin-top: 1px; }
/* Edit mode */
.profile-field-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub);
    margin: 14px 0 5px;
}
.profile-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--al);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
    resize: none;
}
.profile-input:focus { outline: none; border-color: var(--am); }
.profile-username-wrap { position: relative; display: flex; align-items: center; }
.profile-at {
    position: absolute;
    left: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sub);
    pointer-events: none;
}
.profile-input--username { padding-left: 26px; }
.profile-username-hint { font-size: 11.5px; color: var(--sub); margin-top: 5px; line-height: 1.4; }
.profile-username-hint--error { color: #EF4444; }
.profile-pick-group { margin-top: 12px; }
.profile-pick-title {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.profile-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--al);
    background: var(--bg);
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.profile-pick-cb { width: 17px; height: 17px; accent-color: var(--am); flex-shrink: 0; }
.profile-hint { font-size: 12px; color: var(--sub); line-height: 1.5; margin: 0 0 4px; }
.profile-edit-actions { display: flex; gap: 10px; margin-top: 20px; }
.profile-cancel-btn, .profile-save-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.profile-cancel-btn { border: 1px solid var(--al); background: var(--white); color: var(--sub); }
.profile-save-btn { border: none; background: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.profile-save-btn:active { transform: translateY(1px); box-shadow: var(--elev-1); }
.profile-save-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
/* Clickable collaborator name (opens their profile) — reset button to match
   the plain .collab-member-email look, just tappable. */
.collab-member-link {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.collab-member-link:hover { text-decoration: underline; }

/* All pill — also needs contrast border */
.all-pill {
    border: 1.5px solid rgba(188,204,220,0.4) !important;
}

/* Account menu dropdown */
.account-menu {
    position: absolute;
    top: 54px;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    box-shadow: var(--elev-3);
    min-width: 170px;
    overflow: hidden;
    z-index: 300;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.acct-info {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--al);
}
.acct-info-name { font-weight: 700; font-size: 13px; color: var(--text); font-family: 'Outfit', sans-serif; }
.acct-info-email { font-size: 11px; color: var(--sub); margin-top: 2px; }

.acct-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}
.acct-item:active { background: var(--al); }
.acct-item i { color: var(--ad); font-size: 16px; }

/* ── All-button saved places popup ── */
.all-popup {
    position: absolute;
    top: 72px;
    left: 14px;
    width: calc(100% - 28px);
    max-width: 340px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--al);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 300;
    overflow: hidden;
    animation: fadeIn 0.18s ease;
}
.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--al);
}
.popup-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.popup-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.popup-close:active { background: var(--al); }

.popup-chips {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.popup-chips::-webkit-scrollbar { display: none; }
.popup-chips .filter-chip {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 5px 12px !important;
    min-height: 30px !important;
    white-space: nowrap;
}

.popup-list {
    max-height: 44vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 10px 12px;
}

/* Cards inside popup — compact version */
body.v2 .popup-list .location-item {
    margin-bottom: 6px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
}

/* PAC input — shortened non-overlapping search bar when open */
body.v2 #pac-input,
body.v2 #pac-input.search-visible {
    position: absolute !important;
    top: 14px !important;
    left: 72px !important;
    right: 72px !important;
    z-index: 200 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    color: var(--text) !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    display: none !important;
    box-sizing: border-box !important;
}
body.v2 #pac-input.search-open {
    display: block !important;
    pointer-events: auto !important;
    border-radius: 50px !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
    font-size: 15px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AA6B2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}

/* Clear (×) button inside the search bar — the bar itself stays inset between
   the login bubble and the search toggle button (see #pac-input left/right: 72px). */
#pac-clear-btn {
    display: none;
    position: absolute;
    /* Vertically centred against the search bar: bar top:14px, height ≈
       (15px font + 12px*2 padding) ≈ 42px, so centre-line = 14 + 21 = 35px. */
    top: 35px;
    transform: translateY(-50%);
    right: 82px;
    z-index: 210;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sub);
    font-size: 16px;
    padding: 0;
}
#pac-clear-btn:hover { background: var(--al); }

/* PAC suggestions: keep Google's default look entirely (fonts, colors, borders,
   item styling) — only override the container's position/width so the dropdown
   spans the full viewport even though the search bar itself stays inset. */
body.v2 .pac-container {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 8px !important;
    /* Above the Settings overlay (z-index 9500) so the autocomplete dropdown
       isn't hidden behind it — otherwise "search" looks like it has no results. */
    z-index: 10000 !important;
}

/* Floating bulletin-board button — bottom-right corner of an individual
   trip's timeline view only (shown/hidden by openTripTimeline/goBackToFolders
   in app.js). Fixed so it stays anchored to the visible sheet regardless of
   how far the timeline is scrolled; #itinerary-panel's own transform (used
   for the drag-to-snap sheet) becomes its containing block, so it still
   travels with the sheet as it's dragged, same as .reels-edit-bar. */
.bulletin-board-fab {
    position: fixed;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    right: 26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--am);
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
/* !important because `body.v2 i[class*="ph-"] { color: var(--icon) }` is more
   specific than this rule and was painting the glyph dark on the blue FAB. */
.bulletin-board-fab i { font-size: 24px; color: #fff !important; }
.bulletin-board-fab:active { transform: scale(0.92); }
/* "New post" badge — a red dot on the board FAB when a collaborator has posted
   something the current user hasn't seen yet. */
.bulletin-board-fab { overflow: visible; }
.bulletin-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid var(--white, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: bulletinBadgePop 0.25s ease;
}
@keyframes bulletinBadgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Bottom floating tabs ── */
#bottom-tabs {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    width: min(380px, calc(100vw - 32px));
}

.float-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    box-shadow: var(--elev-2);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std),
                box-shadow var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-std);
    min-height: 48px;
    flex: 1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.float-tab:active { background: var(--bg); transform: scale(0.96); }
.float-tab:focus { outline: none; }
.float-tab:focus:not(:focus-visible) { background: var(--white); }
.float-tab i { font-size: 16px; color: var(--ad); transition: color var(--dur-base) var(--ease-std); }
.float-tab--active {
    background: color-mix(in srgb, var(--am) 18%, var(--white));
    color: var(--am);
    box-shadow: var(--accent-shadow);
}
.float-tab--active i { color: #1A73E8; }
body.route-active .float-tab--active {
    background: var(--white);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
}
body.route-active .float-tab--active i { color: var(--ad); }
/* Route mode owns the screen: the map is the route and the controls are the
   route bar. Everything in the top bar goes except the profile circle and the
   search button. !important because #notif-btn and #klook-toggle-btn carry an
   inline display set by JS — removing the class restores whatever that was. */
body.route-active #settings-btn,
body.route-active #notif-btn,
body.route-active #terrain-btn,
body.route-active #current-location-btn,
body.route-active #klook-toggle-btn,
/* ...and their dropdowns, so one left open when route mode starts doesn't
   float on the map with no button under it. #account-menu stays: the profile
   circle that opens it stays too. */
body.route-active #settings-menu,
body.route-active #notif-dropdown { display: none !important; }

/* ── Bottom Sheet ── */
body.v2 #itinerary-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: max(0px, calc(50% - 215px)) !important;
    right: max(0px, calc(50% - 215px)) !important;
    width: auto !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.10), 0 -1px 6px rgba(0,0,0,0.06) !important;
    background: var(--white) !important;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
    z-index: 200 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ══════════════════════════════════════════════════════════════════
   DEV MODE — master admin, wide desktop viewport only (see app.js
   _updateDevModeState). Pins a fixed-size iPhone-14-Pro-Max-shaped
   (430×932) mock to the LEFT — real bezel, Dynamic Island, side
   buttons, injected by _renderPhoneBezel() — instead of a phone-width
   column stretched to the browser's own height. Frees the right side
   for a persistent, non-modal dock for Klook pin curation and Admin
   Mode (template editing happens by using the phone mock on the left,
   scoped to __template__ data) — so both can be done without a
   full-screen overlay hiding the live map.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    body.v2 {
        /* The 430×932 phone scales DOWN to fit shorter windows so its bottom
           never runs off-screen. --phone-scale (a unitless ratio) is set by JS
           (_updatePhoneScale) since CSS can't divide 100vh by a px height to get
           a ratio; it defaults to 1 (full size) until then. Every phone metric
           below is expressed in terms of it so the whole mock scales as a unit,
           then re-centres in the viewport. */
        --phone-w: calc(430px * var(--phone-scale, 1));
        --phone-h: calc(932px * var(--phone-scale, 1));
        --phone-x: calc(50vw - var(--phone-w) / 2);
        --phone-y: calc((100vh - var(--phone-h)) / 2);
    }
    body.v2 #map-container {
        left: var(--phone-x) !important;
        right: auto !important;
        top: var(--phone-y) !important;
        bottom: auto !important;
        /* Render the app at a TRUE 430×932 phone viewport, then scale visually
           with one transform. (The old approach shrank the logical width to
           ~350px, cramping the top bar under the island.) */
        width: 430px !important;
        height: 932px !important;
        transform: scale(var(--phone-scale, 1)) !important;
        transform-origin: top left !important;
        border-radius: 52px !important;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
        z-index: 1;
        /* Clips the reparented bottom-sheet (see _syncDevPhoneClip) — the
           sheet is now an absolute child of this box, so its off-screen
           peek/half slide is contained within the phone instead of spilling
           into the dark area below it. Also rounds the map to the phone. */
        overflow: hidden !important;
        /* Round the corners the way Google's own embeds do: overflow:hidden +
           border-radius alone does NOT clip the map's GPU-composited tile layers
           (they leak square corners past the radius). clip-path clips the whole
           subtree — tiles, WebGL, controls — to the exact rounded screen.
           Coordinates are in the element's own (pre-transform) space, so the
           natural 52px radius is correct — the transform scales it to match. */
        clip-path: inset(0 round 52px) !important;
    }
    /* Bottom sheet, reparented into #map-container by _syncDevPhoneClip and
       re-anchored as an absolute child of the phone screen. Its own
       translateY peek/half slide now clips against the phone's bottom edge
       (via #map-container's overflow:hidden) rather than the viewport's. */
    body.v2 #itinerary-panel {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 70px) !important;
        max-height: calc(100% - 70px) !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 2;
    }
    /* #topbar and #bottom-tabs are DOM children of #map-container, which is
       itself the position:fixed containing block their own left/right/
       bottom percentages resolve against — so unlike #itinerary-panel
       (a body-level sibling), they need NO viewport-relative left/width
       override at all; #map-container moving is enough to carry them
       along correctly. Only #topbar's `top` needs a genuine change, to
       clear the Dynamic Island (which sits ~11–48px from the screen's
       true top edge — well past the 14px inset meant for a notch-less
       phone). */
    body.v2 #topbar {
        /* No Dynamic Island now — the top bar sits near the top of the full
           screen, just inside the rounded corner. Logical px in the 430px
           viewport (scales with the map container). */
        top: 20px !important;
        z-index: 3;
    }

    /* Decorative frame (bezel + Dynamic Island + side buttons), injected by
       _renderPhoneBezel() into TWO thin wrappers pinned to the phone screen's
       top-left (--phone-x/--phone-y) and scaled by ONE transform (--phone-scale)
       — no per-element `* scale` math. The bezel + side buttons sit BEHIND the
       screen (#phone-frame-back, z-index below #map-container's 1); the Dynamic
       Island in FRONT (#phone-frame-front, above the map). Children use fixed,
       natural 430×932-relative offsets, so there are no scale-multiplied magic
       numbers to drift. */
    body.v2 #phone-frame-back,
    body.v2 #phone-frame-front {
        display: block;
        position: fixed;
        left: var(--phone-x);
        top: var(--phone-y);
        width: 430px;
        height: 932px;
        transform: scale(var(--phone-scale, 1));
        transform-origin: top left;
        pointer-events: none;
    }
    body.v2 #phone-frame-back  { z-index: 0; }
    /* Dynamic Island removed — the screen is treated as a simple full rectangle,
       so the front wrapper (which only holds the island) is hidden and the map
       fills to the very top. */
    body.v2 #phone-frame-front { display: none !important; }
    #phone-frame-back #phone-bezel {
        position: absolute; left: -14px; top: -14px; width: 458px; height: 960px;
        border-radius: 66px;
        background: linear-gradient(155deg, #3a3d42, #1a1c1f 40%, #101113);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 30px 70px rgba(0,0,0,0.55);
    }
    #phone-frame-front .phone-island {
        position: absolute; left: 152px; top: 11px; width: 126px; height: 37px;
        border-radius: 20px; background: #000;
    }
    #phone-frame-back .phone-btn { position: absolute; }
    #phone-frame-back .phone-btn--mute   { left: -16px; top: 92px;  width: 3px; height: 28px; }
    #phone-frame-back .phone-btn--vol-up { left: -16px; top: 140px; width: 3px; height: 52px; }
    #phone-frame-back .phone-btn--vol-dn { left: -16px; top: 202px; width: 3px; height: 52px; }
    #phone-frame-back .phone-btn--power  { left: 443px; top: 160px; width: 3px; height: 84px; }

    /* Two flanking docks around the centered phone. Positioning lives HERE,
       inside the media query, alongside the --phone-x/--phone-y it depends
       on. Left dock spans from the left margin to the phone's left bezel
       edge (--phone-x - 14px) minus a gap; right dock mirrors it. Both
       match the phone's vertical span for a clean 3-column line-up. */
    #dev-template-panel {
        left: 24px;
        right: calc(100vw - var(--phone-x) + 30px);
        top: var(--phone-y);
        bottom: var(--phone-y);
    }
    #dev-klook-panel {
        left: calc(var(--phone-x) + 430px + 30px);
        right: 24px;
        top: var(--phone-y);
        bottom: var(--phone-y);
    }
    /* The Template + Klook docks remain MASTER-ADMIN only — the phone mock
       itself now shows for every user, but these admin panels don't. */
    body.v2.dev-mode #dev-template-panel,
    body.v2.dev-mode #dev-klook-panel { display: flex; }

    /* Phone-scoped overlays — every bottom-sheet/modal/picker that belongs
       to the simulated phone UI (Klook edit form, pin pickers, reel viewer,
       photo lightbox, attach-reel float) is `position:fixed; inset:0` so it
       normally covers the whole screen. In dev mode that meant a form
       triggered from the phone/right-panel spanned the entire browser
       window instead of the 430px phone. Clip them all to the phone box and
       round to the screen's radius so they read as in-phone overlays. */
    /* The white iOS-style status bar was removed — the map now fills the space
       up to the Dynamic Island (the island is the visual "ceiling"), while the
       logo + nav buttons keep their same position (#topbar top, below the
       island). Hidden rather than deleted so the injected element is harmless. */
    body.v2 .phone-statusbar { display: none !important; }

    /* Desktop pop-ups dock to the RIGHT of the phone (in the empty space) so the
       phone's own UI stays fully visible + interactive. The full-screen backdrop
       becomes a transparent, click-through column on the right; only its actual
       sheet/card catches pointer events. */
    body.v2 .replace-pin-overlay,
    body.v2 .pin-picker-overlay,
    body.v2 .reel-popup-overlay,
    body.v2 .pdc-lightbox,
    body.v2 .profile-overlay,
    body.v2 .settings-overlay,
    body.v2 .follow-list-overlay,
    body.v2 .klook-popup-overlay,
    body.v2 .pin-list-picker-overlay,
    body.v2 .add-to-list-overlay {
        left: calc(var(--phone-x) + var(--phone-w) + 28px) !important;
        right: 24px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }
    /* The real sheet/card: interaction restored, un-anchored from its full-screen
       / bottom-sheet position, and sized to sit as a floating card in the panel. */
    body.v2 .replace-pin-overlay > *,
    body.v2 .pin-picker-overlay > *,
    body.v2 .reel-popup-overlay > *,
    body.v2 .pdc-lightbox > *,
    body.v2 .profile-overlay > *,
    body.v2 .settings-overlay > *,
    body.v2 .follow-list-overlay > *,
    body.v2 .klook-popup-overlay > *,
    body.v2 .pin-list-picker-overlay > *,
    body.v2 .add-to-list-overlay > * {
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: min(430px, 100%) !important;
        max-width: 430px !important;
        max-height: calc(100vh - 48px) !important;
        border-radius: 20px !important;
    }
    /* The profile panel is its own position:fixed element — dock it in the same
       right-side panel as the pop-ups, phone left untouched. */
    body.v2 .profile-panel {
        left: calc(var(--phone-x) + var(--phone-w) + 28px) !important;
        right: 24px !important;
        transform: none !important;
        top: max(24px, calc(50vh - 380px)) !important;
        bottom: auto !important;
        height: min(760px, calc(100vh - 48px)) !important;
        width: auto !important;
        max-width: 430px !important;
    }
    /* Floating (non-backdrop) pin helpers dock to the right panel too. */
    body.v2 .pdc-attach-float,
    body.v2 .reel-select-confirm,
    body.v2 .reel-select-banner {
        left: calc(var(--phone-x) + var(--phone-w) + 28px) !important;
        right: auto !important;
        width: min(398px, calc(100vw - var(--phone-x) - var(--phone-w) - 52px)) !important;
        transform: none !important;
    }
}
/* Hidden by default at ANY width — only the >=1100px media query above
   ever reveals these (and only combined with body.v2.dev-mode). Without
   this, the decorative frame wrappers (only positioned inside the >=1200px
   media query, off --phone-x/--phone-y) would otherwise show unstyled near the
   page's top-left corner on narrow windows. */
#phone-frame-back, #phone-frame-front, .dev-side-panel {
    display: none;
}
.phone-btn {
    background: #232528;
    border-radius: 3px;
}
.dev-side-panel {
    position: fixed;
    background: var(--white);
    border-radius: 24px;
    box-shadow: var(--elev-4);
    overflow: hidden;
    flex-direction: column;
    z-index: 50;
}

.dev-panel-header {
    flex-shrink: 0;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--al);
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.dev-panel-header i { color: var(--am); font-size: 20px; }
.dev-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 32px;
}
.dev-panel-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sub);
    margin: 0 0 10px;
}
.dev-panel-hint {
    font-size: 13.5px;
    color: var(--sub);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 46em;
}
.dev-panel-toggle-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.dev-panel-toggle-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px solid var(--al);
    background: var(--bg);
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dev-panel-toggle-btn:hover { border-color: var(--am); }
.dev-panel-toggle-btn.active { background: var(--am); border-color: var(--am); color: #fff; }
.dev-panel-publish-btn,
.dev-panel-add-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: var(--am);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--am) 35%, transparent);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.dev-panel-publish-btn { background: var(--text); box-shadow: none; }
.dev-panel-publish-btn:hover, .dev-panel-add-btn:hover { transform: translateY(-1px); }

/* Desktop-scale Klook row list — more breathing room than the mobile
   overlay version of these same rows. */
#dev-klook-panel .klook-admin-list { gap: 10px; padding: 0; }
#dev-klook-panel .klook-admin-row {
    border-radius: 16px;
    padding: 6px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#dev-klook-panel .klook-admin-row:hover { border-color: var(--al); background: var(--white); }
#dev-klook-panel .klook-admin-row-main { padding: 10px 16px; }
#dev-klook-panel .klook-admin-row-name { font-size: 14px; }
#dev-klook-panel .klook-admin-row-icon { width: 38px; height: 38px; font-size: 16px; }
#dev-klook-panel .klook-admin-row-icon:hover { background: var(--al); }

/* Drag handle area */
.sheet-handle {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 0;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    touch-action: none;
    user-select: none;
    cursor: grab;
    gap: 10px;
}
.drag-bar {
    width: 36px;
    height: 4px;
    background: var(--al);
    border-radius: 2px;
    flex-shrink: 0;
}
.sheet-header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    min-height: 40px;
}
/* Title in the auto centre column — always at the exact visual centre */
.sheet-title {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2;
}
.sheet-close-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
    justify-self: start;
}
.sheet-close-btn:active { background: var(--al); color: var(--text); }

/* Sheet header action button (e.g. + New Trip) — dark circle to match top-bar icons */
.sheet-action-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.sheet-action-btn:active { background: var(--am); color: var(--white); }

/* Left slot wrapper — holds close button and optional collab row */
.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-column: 1;
    justify-self: start;
}

/* Right slot wrapper — holds action button, pushed to far right */
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    grid-column: 3;
    justify-self: end;
}

/* Pill text variant of sheet action button (Add Folder / Add Pin) */
.sheet-pill-btn {
    width: auto !important;
    min-width: unset !important;
    border-radius: 20px !important;
    padding: 0 12px !important;
    gap: 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.sheet-pill-btn i { font-size: 14px; }

/* Collab row inside header (timeline mode) */
.header-collab-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Unified collab pill button for header */
.collab-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 2px 8px 2px 2px;
    height: 30px;
    cursor: pointer;
    transition: all var(--transition);
}
.collab-pill-btn:hover {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 8%, white);
}
.collab-pill-btn i {
    font-size: 12px;
    color: var(--text);
}
/* Overlapping avatar stack — replaces the old static "Shared" text badge and
   the owner-only single-avatar pill, so both owner and collaborator views
   show real people instead of a generic label. */
.collab-bubble-stack {
    display: flex;
    align-items: center;
}
.collab-bubble-stack .collab-row-avatar {
    width: 24px;
    height: 24px;
    margin-left: -8px;
    border: 2px solid var(--white);
}
.collab-bubble-stack .collab-row-avatar:first-child { margin-left: 0; }
/* Role rings — owner red, guest/collaborator blue — so role reads at a
   glance in the overlapping stack. */
/* Full border shorthand — the full collaborators panel (.collab-member-row)
   doesn't get a border from anywhere else, so border-color alone would have
   nothing to color there. */
.collab-row-avatar.collab-avatar-owner { border: 2px solid #ef4444; }
.collab-row-avatar.collab-avatar-guest { border: 2px solid #3b82f6; }
/* Add-collaborator badge — matches avatar ring styling so it reads as
   part of the stack instead of a bare floating icon. */
.collab-row-avatar.collab-add-avatar {
    background: var(--bg);
    color: var(--am);
    font-size: 12px;
    cursor: pointer;
}

/* Shared avatar look used both in the header stack and the full panel rows */
.collab-row-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.collab-row-initial {
    background: var(--am);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.collab-overflow {
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 10px;
    font-weight: 700;
}

/* Collab management panel */
.collab-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.collab-panel {
    position: relative;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 320px;
}
.collab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.collab-panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.collab-log-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
}
.collab-log-btn i { font-size: 13px; }
/* The shared .collab-history-dropdown is normally absolutely positioned
   relative to a wrapper with no other content, so top:100% sits right
   under it. Inside .collab-panel that same wrapper contains the whole
   member list too, so absolute positioning here would push it way down.
   Keep it in normal flow instead — it just expands the panel. */
#panel-collab-history-dropdown {
    position: static;
    width: 100%;
    max-height: 200px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
/* Activity log as its own centred popup (above the Collaborators overlay), so
   opening it never stretches the panel. */
.collab-log-modal-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.collab-log-modal-card {
    background: var(--white); border: 1px solid var(--al); border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 100%; max-width: 340px; max-height: 70vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.collab-log-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--al);
}
.collab-log-modal-title {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--am);
}
.collab-log-modal-close {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--bg); color: var(--sub); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.collab-log-modal-list {
    padding: 14px 16px; overflow-y: auto;
}
.collab-panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.collab-panel-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sub);
    font-size: 14px;
}
.collab-panel-loading {
    font-size: 13px;
    color: var(--sub);
    text-align: center;
    padding: 8px 0;
}
.collab-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--al);
}
.collab-member-row .collab-row-avatar { width: 28px; height: 28px; font-size: 12px; }
/* Preset icon avatars: glyph at half the circle, matching _avatarHtml's
   size * 0.5 everywhere else. Without this the <i> inherits the row's font
   size and the icon sits tiny inside the gradient. */
.collab-row-avatar.icon-avatar i { font-size: 14px; }
.collab-bubble-stack .collab-row-avatar.icon-avatar i { font-size: 12px; }
.collab-owner-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 4px;
}
/* "View only" — same chip shape as the Owner tag, in amber rather than the
   Owner blue: it's a restriction, not a second role. (An earlier pass left an
   amber !important rule for this class with no markup rendering it; that
   duplicate is gone and this is now the single definition.) */
.collab-viewonly-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700;
    color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    border-radius: 8px; padding: 1px 6px; margin-left: 4px;
    white-space: nowrap;
}
.collab-viewonly-tag i { font-size: 11px; color: #d97706 !important; }
/* Ask-the-owner-for-edit-rights button on a view-only guest's own row. */
.collab-request-edit-btn {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--am); background: color-mix(in srgb, var(--am) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--am) 30%, transparent);
    border-radius: 999px; padding: 4px 10px; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.collab-request-edit-btn i { font-size: 12px; color: var(--am) !important; }
.collab-request-edit-btn:active { filter: brightness(0.95); }
.collab-request-edit-btn:disabled { opacity: .6; }
/* Already sent — flat, non-interactive. */
.collab-request-edit-btn--sent {
    color: var(--sub); background: var(--chip, #eef0f3);
    border-color: transparent; cursor: default;
}
.collab-request-edit-btn--sent i { color: var(--sub) !important; }
.collab-member-email {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collab-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--sub);
    border-radius: 4px;
    flex-shrink: 0;
}
.collab-remove-btn:hover { color: #e53e3e; }
.collab-makeowner-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--sub);
    border-radius: 4px;
    flex-shrink: 0;
}
.collab-makeowner-btn:hover { color: #ef4444; }
.collab-permission-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--al);
    border: 1px solid var(--al);
    cursor: pointer;
    padding: 3px 8px;
    color: var(--sub);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.collab-permission-toggle--edit {
    background: color-mix(in srgb, var(--am) 14%, transparent);
    border-color: var(--am);
    color: var(--am);
}
.collab-empty {
    font-size: 12px;
    color: var(--sub);
    text-align: center;
    margin: 6px 0;
}
.collab-invite-permission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: var(--sub);
}
.collab-invite-permission-toggle {
    display: flex;
    background: var(--al);
    border-radius: 999px;
    padding: 2px;
}
.collab-invite-permission-toggle button {
    border: none;
    background: none;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub);
    border-radius: 999px;
    cursor: pointer;
}
.collab-invite-permission-toggle button.active {
    background: var(--white);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Username-search invite (Collaborators panel) */
.collab-invite-search { margin-top: 12px; }
.collab-invite-search-inputwrap {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 12px;
    background: var(--bg); border: 1px solid var(--al); color: var(--sub);
}
.collab-invite-search-inputwrap i { font-size: 15px; flex-shrink: 0; }
.collab-invite-search-inputwrap input {
    flex: 1; border: none; background: none !important; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    /* Beat the global body.v2 input min-height:44px — this input sits inside a
       padded wrap, so it only needs to be a single text line tall. */
    margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
}
.collab-invite-search-results { display: flex; flex-direction: column; margin-top: 4px; }
.collab-invite-empty { font-size: 12px; color: var(--sub); padding: 8px 12px; }
.collab-invite-result {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; background: none; cursor: pointer;
    border-radius: 10px; text-align: left;
}
.collab-invite-result:active { background: var(--bg); }
.collab-invite-result--sending { opacity: 0.5; }
.collab-invite-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.collab-invite-avatar-initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--am); color: #fff; font-weight: 700; font-size: 13px;
}
.collab-invite-result-name {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.collab-invite-result-handle { font-weight: 500; font-size: 11.5px; color: var(--sub); }
.collab-invite-result > i { color: var(--am); font-size: 16px; flex-shrink: 0; }
.collab-invite-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--am);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    box-shadow: var(--accent-shadow);
}
.collab-invite-btn:hover { opacity: 0.9; }
.collab-invite-btn:active { transform: translateY(1px); box-shadow: var(--elev-1); }

.collab-leave-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
}
.collab-leave-btn:hover { background: rgba(239,68,68,0.08); }

/* ── Settings panel: nickname field (added to the existing modal in
   theme.js, reusing its .settings-section/.settings-label) ──────────── */
.settings-hint {
    font-size: 11px;
    color: var(--sub);
    margin: 2px 0 6px;
}
.settings-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--al);
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    background: var(--bg);
}
.settings-input:focus { outline: none; border-color: var(--am); }
.settings-save-btn {
    margin-top: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: var(--am);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.settings-save-btn:active { opacity: 0.85; }

/* Shared trip folder badge */
.folder-shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border-radius: 6px;
    padding: 2px 6px;
}
.trip-folder--shared .folder-tab {
    border-color: color-mix(in srgb, var(--am) 40%, transparent);
}
.trip-folder--shared .folder-body {
    border-color: color-mix(in srgb, var(--am) 40%, transparent);
}

/* Hide desktop chrome */
body.v2 .sidebar-toggle-btn,
body.v2 .extended-crew-bubble,
body.v2 .panel-header,
body.v2 #mobile-top-header,
body.v2 #system-status-badge { display: none !important; }

/* Hidden tab bar */
body.v2 .tabs-hidden { display: none !important; }

/* Panel column */
body.v2 .panel-primary-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    min-height: 0;
}

/* Scrollable content area */
body.v2 .views-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    background: var(--white);
    padding: 14px;
    box-sizing: border-box;
}

/* Location cards */
body.v2 .location-item {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--elev-2) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 8px !important;
    min-height: unset !important;
    padding: 12px 14px !important;
    /* Transform runs on the fast token so a press reads as instant, while the
       shadow/colour settle on the slower one — that split is what makes a
       tap feel responsive rather than laggy. */
    transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-std) !important;
}
body.v2 .location-item:hover {
    background: var(--white) !important;
    border-color: var(--am) !important;
    transform: none !important;
    box-shadow: var(--elev-3) !important;
}
body.v2 .location-item:active {
    background: var(--bg) !important;
    transform: translateY(1px) scale(0.995) !important;
    box-shadow: var(--elev-1) !important;
}
body.v2 .location-item.selected {
    background: color-mix(in srgb, var(--am) 8%, white) !important;
    border-color: var(--am) !important;
}
body.v2 .loc-name { color: var(--text) !important; }
body.v2 .loc-country, body.v2 .loc-meta { color: var(--sub) !important; }

/* Country group — transparent wrapper, two separate bubbles */
body.v2 .country-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
body.v2 .country-group.group-hidden { display: none !important; }
/* Tighten the gap between the country bar and its first state separator. */
body.v2 .country-cards-list .picker-city-group:first-child .pins-city-header { margin-top: 4px; }
/* Header — standalone pill bubble. Same size as the Others-tab country bar
   and the itinerary folder view's .trip-pill (16px/18px padding, 12px
   radius) — was a taller 21px/16px pill, inconsistent with those. */
/* Drilled into one country (chip selected): hide the redundant country header
   bar so the Saved list starts straight at the state separators. */
body.v2.saved-country-drilled #saved-list .country-group .country-header { display: none !important; }

body.v2 .country-header {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: var(--elev-2) !important;
    transition: all 0.15s ease !important;
    /* Same grid geometry as the Others list (.picker-country-header) so the
       Saved country bars read as the same card: count pill + star on the left,
       name centered, ⋮ on the right. */
    grid-template-columns: 1fr minmax(0, auto) 1fr !important;
    column-gap: 10px !important;
}
/* Left group: blue count pill (matching the Others list) + the star. */
body.v2 .country-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-self: start !important;
}
body.v2 .country-count-pill {
    background: var(--am);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
}
/* Trim the ⋮ button's padding so the bar height matches the Others list
   (its taller default padding was inflating the row past the 53px Others bar). */
body.v2 .country-header .country-bulk-arrow { justify-self: start !important; padding: 0 !important; font-size: 16px !important; }
/* Read-only "All" view: keep the ⋮ as an invisible, inert placeholder so the
   header's [⋮ | name | count] grid stays balanced and the name centres. */
body.v2 .country-header .country-bulk-arrow--ghost { visibility: hidden !important; pointer-events: none !important; }
/* Right group: pin count + red pin marker + drill-in caret (matches the
   Saved / custom-list bars). */
body.v2 .country-header-meta { justify-self: end !important; display: flex; align-items: center; gap: 8px; }
body.v2 .country-header:active { transform: scale(0.98) !important; }
body.v2 .country-group:not(.country-group--collapsed) .country-header {
    border-radius: 12px !important;
    border-bottom: 1px solid var(--al) !important;
    margin-bottom: 4px !important;
}
body.v2 .country-header-label {
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    gap: 8px !important;
}
body.v2 .country-count {
    background: var(--am) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 2px 9px !important;
    border-radius: 12px !important;
}
/* Cards list — transparent flex column; each card is its own island */
body.v2 .country-cards-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 6px !important;
    display: flex;
    flex-direction: column !important;
}
/* Each individual location card = standalone white bubble with left accent.
   Also applies to .picker-country-group (the Pins tab "Others" list) so its
   rows share the same card look as the main Saved Pins list. */
body.v2 .country-cards-list .location-item,
body.v2 .picker-country-group .location-item {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    border-left: 3px solid var(--am) !important;
    border-right: 3px solid var(--am) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    padding: 14px 14px 14px 16px !important;
    margin: 0 0 6px !important;
    transition: all 0.15s ease !important;
}
body.v2 .country-cards-list .location-item:active,
body.v2 .picker-country-group .location-item:active {
    transform: scale(0.98) !important;
    background: var(--bg) !important;
}
body.v2 .country-cards-list .location-item:last-child {
    border-bottom: 1px solid var(--al) !important;
}
/* Others-tab rows reuse .saved-card's centered title row, but need their own
   bookmark "save to mine" badge (circular, distinct from the flat pencil
   edit button) positioned the same way .card-edit-btn is in the All tab. */
body.v2 .shared-pin-row .card-title-row .btn-save-mine-badge {
    position: absolute !important;
    right: 0 !important;
}
/* Bulk-select highlight — must out-specificity the base card rules above,
   which force border/background/box-shadow regardless of card context. */
body.v2 .location-item.saved-selected,
body.v2 .country-cards-list .location-item.saved-selected {
    background: color-mix(in srgb, var(--am) 20%, var(--white)) !important;
    border-color: var(--am) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px var(--am) !important;
}
body.v2 .reel-tag-pill { background: color-mix(in srgb, var(--am) 12%, white) !important; color: var(--am) !important; }

/* Trip controls */
body.v2 .trip-selector { background: var(--white) !important; border-color: var(--al) !important; color: var(--text) !important; }
body.v2 .btn-trip-action { background: var(--white) !important; border-color: var(--al) !important; color: var(--icon) !important; min-height: 40px; }
body.v2 .btn-trip-action:active { background: var(--al) !important; }

/* Inputs */
body.v2 .inline-input,
body.v2 input[type="text"],
body.v2 input[type="email"],
body.v2 input[type="date"],
body.v2 input[type="time"],
body.v2 select,
body.v2 textarea {
    background: var(--bg) !important;
    border-color: var(--al) !important;
    color: var(--text) !important;
    min-height: 44px;
    border-radius: 10px !important;
}
body.v2 .inline-input::placeholder { color: var(--ad) !important; }
body.v2 .inline-label { color: var(--sub) !important; }

/* Primary action button */
body.v2 .btn-save {
    background: var(--am) !important;
    color: var(--white) !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2) !important;
    transition: all var(--transition) !important;
}
body.v2 .btn-save:active { background: #2563EB !important; }
body.v2 .btn-delete {
    min-height: 36px !important;
    height: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #ef4444 !important;
    border: 1.5px solid #ef4444 !important;
    color: #000 !important;
}
body.v2 .btn-delete:active { background: #dc2626 !important; }
/* Pins tab's "Delete Location" specifically — a touch wider than the generic
   36px square so it doesn't feel like an afterthought next to Save. */
body.v2 .btn-delete.btn-delete-pin { width: 48px !important; }

/* Filter chips */
body.v2 .filter-chip {
    background: var(--white) !important;
    border: 1.5px solid var(--al) !important;
    color: var(--sub) !important;
    height: 36px;
    border-radius: 50px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}
body.v2 .filter-chip:active { transform: scale(0.95) !important; }
body.v2 .filter-chip.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: var(--white) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.25) !important;
}

/* Pins tab's country bar (All/country/Others chips) — shrunk to match the
   Itinerary tab's "Add Trip"/"A–Z" toolbar bar size instead of the taller,
   fully-pill-shaped default .filter-chip used elsewhere (Reels folders,
   pickers, etc). */
body.v2 #saved-country-chips.tab-filter-chips .filter-chip {
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* Booking cards */
body.v2 .booking-card {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.v2 .booking-card-header { border-bottom-color: var(--al) !important; }

/* ── Left-side vertical timeline layout ────────────────────────── */
body.v2 .timeline-container {
    position: relative;
    padding: 4px 0 8px 0;
}
/* Vertical connecting line behind dots and icons
   Container padding-left=48px → content starts at 48px from container left.
   Line sits at left=22px (inside the 48px padding zone).
   Dot (12px wide) centered on line: left = 22-6 = 16px from container → left:-32px from item.
   Badge (22px wide) centered on line: left = 22-11 = 11px from container → left:-37px from transit-row.
   With view-page 16px padding: line at 38px, dot at 32px, badge at 27px from screen left. */
body.v2 .timeline-container::before {
    display: none;
}
/* Location card wrapper */
body.v2 .tl-item {
    position: relative;
    margin-bottom: 4px;
}
body.v2 .tl-item.route-segment-highlighted .location-item {
    outline: 2px solid var(--route-highlight-color, var(--am));
    outline-offset: 2px;
    border-radius: 12px;
    animation: routeCardPulse 0.4s ease forwards;
}
@keyframes routeCardPulse {
    0%   { outline-color: transparent; }
    50%  { outline-color: var(--route-highlight-color, var(--am)); }
    100% { outline-color: var(--route-highlight-color, var(--am)); }
}
.picker-country-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 10px 4px 8px;
    border-bottom: 1px solid var(--al);
    margin-bottom: 10px;
}
.picker-country-group {
    /* No margin-bottom here — the parent .cards-list already applies a 20px
       flex `gap` between groups; a margin on top of that doesn't collapse
       with flex gap and was stacking into a doubled, oversized gap. */
}
/* Centred country header (Add-to-Itinerary picker): title dead-centre; the flag
   + count + caret sit on the right (title→flag→count order) without offsetting
   the centred title. */
.picker-country-header--centred { position: relative; justify-content: center; }
.picker-country-header--centred .pch-country-name { text-align: center; font-weight: 700; }
.picker-country-header--centred .pch-country-right {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;
}
.picker-country-header--centred .pch-country-right .picker-country-count { margin-left: 0; }
.picker-country-count {
    margin-left: auto;
    background: var(--am);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}
/* Others tab: header-to-cards spacing matches Saved Pins' .country-group
   (flex column + 8px gap between the header pill and its cards), instead of
   the header and cards sitting flush together with only the header's own
   padding between them. */
#saved-others-list .picker-country-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#saved-others-list .picker-country-group.group-hidden { display: none !important; }
/* Others tab: collapsible country bars — same size/shape and true grid
   centering as the itinerary folder view's .trip-pill (not the taller Saved
   Pins .country-header pill), with the title centered in its own grid
   column regardless of how wide the count/chevron group on the right is. */
#saved-others-list .picker-country-header {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 10px;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 0;
    box-shadow: 0 1px 4px var(--shadow);
    transition: all 0.15s ease;
    box-sizing: border-box;
}
#saved-others-list .picker-country-header:active {
    background: var(--bg);
    transform: scale(0.98);
}
#saved-others-list .picker-country-header-left {
    display: flex;
    align-items: center;
    justify-self: start;
}
#saved-others-list .picker-country-header-left .picker-country-count {
    margin-left: 0;
}
#saved-others-list .picker-country-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
#saved-others-list .picker-country-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
/* Reels "Add to Pin" picker: same trip-pill-sized, centered country bar as
   the Others tab, plus accent-bordered card rows instead of the flat
   .pin-loc-item look used elsewhere — the row stays a single click-anywhere
   button (no separate action icon needed here), just reskinned. */
.reel-pin-picker-group > .picker-country-header {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 10px;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    box-sizing: border-box;
}
.reel-pin-picker-group > .picker-country-header .picker-country-header-spacer {
    justify-self: stretch;
}
.reel-pin-picker-group > .picker-country-header .picker-country-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.reel-pin-picker-group > .picker-country-header .picker-country-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
.reel-pin-picker-group .pin-loc-item {
    background: var(--white);
    border: 1px solid var(--al);
    border-left: 3px solid var(--am);
    border-right: 3px solid var(--am);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    padding: 14px 14px 14px 16px;
    margin-bottom: 6px;
    justify-content: center;
}
.reel-pin-picker-group .pin-loc-item .pin-loc-info {
    flex: unset;
    align-items: center;
}
.reel-pin-picker-group .pin-loc-item .pin-loc-name {
    text-align: center;
}
/* Add to Itinerary picker rows: same accent-bordered card as Pins tab lists.
   The Schedule icon button's own positioning rule is further down
   (.itinerary-picker-row .btn-schedule-icon). */
body.v2 .itinerary-picker-row .card-title-row {
    cursor: pointer;
}
.picker-country-chevron {
    flex-shrink: 0;
    color: var(--sub);
    font-size: 13px;
    transition: transform 0.2s ease;
}
.picker-country-group:not(.country-group--collapsed) .picker-country-chevron {
    transform: rotate(180deg);
}
/* City sub-groups: collapsed-by-default rows nested inside a country block.
   Lighter/smaller than the country bar since they sit one level down. */
.picker-city-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    padding: 7px 2px 6px 8px;
    cursor: pointer;
}
.picker-city-count {
    margin-left: auto;
    background: var(--al);
    color: var(--text);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.picker-city-chevron {
    flex-shrink: 0;
    color: var(--sub);
    font-size: 12px;
    transition: transform 0.2s ease;
}
.picker-city-group:not(.city-group--collapsed) .picker-city-chevron {
    transform: rotate(180deg);
}
/* Centred state separator between city groups (no counter, more prominent). */
.pins-state-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 4px 8px;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
}
.pins-state-sep::before, .pins-state-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--al);
}
.pins-state-sep span { white-space: nowrap; }

/* Pins-tab city header: a centred separator — line across, city name + caret
   dead-centre, pin count floated on the right (absolute so it doesn't push the
   name off-centre). Symmetric padding keeps the name truly centred. */
.pins-city-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px; margin: 8px 0 2px; cursor: pointer;
}
.pins-city-header .pch-line { flex: 1; height: 1px; background: var(--al); }
/* State title inside a white pill with a grey outline; the title text is
   centred in the pill (symmetric padding) and the caret sits in the right pad. */
.pins-city-header .pch-name {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    padding: 5px 28px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.pins-city-header .picker-city-chevron {
    position: absolute; right: 10px; top: 50%; margin-top: -6px; color: var(--sub);
}
/* Count sits at the far right; a matching-width spacer on the left keeps the
   name dead-centre while both lines extend the full width of the country bar. */
.pins-city-header .picker-city-count { position: static; margin: 0; flex: 0 0 auto; min-width: 22px; }
.pins-city-header .pch-count-balance { flex: 0 0 auto; min-width: 22px; }
/* Star toggle on the LEFT of a state separator — same width as the count on the
   right so the state name stays dead-centre. Yellow when starred (state pins to
   the top of its country), grey outline otherwise. */
.pins-city-header .pins-state-star {
    flex: 0 0 auto; min-width: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 4px 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pins-city-header .pins-state-star i { font-size: 16px; color: #F4B400 !important; transition: color 0.15s ease, transform 0.12s ease; }
.pins-city-header .pins-state-star--active i { color: #F4B400 !important; }
.pins-city-header .pins-state-star:active i { transform: scale(0.85); }
/* Reel editor: horizontal row of draggable preview tiles + an "add URL" input */
.reel-edit-tiles {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: none;
}
.reel-edit-tiles::-webkit-scrollbar { display: none; }
.reel-edit-tile {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    cursor: grab;
    -webkit-touch-callout: none;
}
.reel-edit-tile:active { cursor: grabbing; }
.reel-edit-tile .reel-tile-preview {
    width: 84px;
    aspect-ratio: 9 / 14;
    border-radius: 10px;
    overflow: hidden;
    background: var(--al);
    pointer-events: none; /* let pointerdown fall through to the tile for drag */
}
/* Drag hint pill at the bottom of the tile (the whole tile actually drags). */
.reel-edit-drag {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 18px;
    border-radius: 9px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}
/* × to unpin the reel — top-right of the tile. */
.reel-edit-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.reel-edit-remove:active { background: #EA4335; }
.reel-edit-remove i { color: #fff !important; }
.reel-edit-dragging { opacity: 0.35; }
/* Floating clone that follows the finger while reordering. */
.reel-edit-ghost {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    transform: scale(1.06);
    opacity: 0.95;
}
.reel-edit-ghost .reel-edit-remove, .reel-edit-ghost .reel-edit-drag { display: none; }
/* Reel carousel popup — floats ABOVE the location card's Reel button, no dark
   backdrop (the overlay is transparent, only there to catch outside clicks). */
.reel-carousel-overlay {
    position: fixed; inset: 0; z-index: 9550;
    background: transparent;
}
.reel-carousel-pop {
    position: fixed;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 16px));
    background: var(--white);
    border-radius: 16px;
    padding: 10px 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.32);
    animation: fadeIn 0.14s ease;
}
.reel-carousel-head {
    display: grid; grid-template-columns: 32px 1fr 32px; align-items: center;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
}
.reel-carousel-title { text-align: center; }
.reel-carousel-close, .reel-carousel-editbtn {
    background: none; border: none; cursor: pointer; color: var(--sub);
    font-size: 17px; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
}
.reel-carousel-editbtn { justify-self: end; }
.reel-carousel-close { justify-self: start; }
.reel-carousel-pop.editing .reel-carousel-editbtn { color: var(--am); background: var(--al); }
/* Up to 3 tiles across; each is exactly a third of the row so a single reel
   keeps that size (isn't blown up to full width) and 3 fill the card. */
.reel-carousel-tiles { padding-bottom: 2px; overflow-x: visible; gap: 10px; }
.reel-carousel-tiles .reel-edit-tile { flex: 0 0 auto; width: calc((100% - 20px) / 3); min-width: 0; }
.reel-carousel-tiles .reel-edit-tile .reel-tile-preview { width: 100%; }
/* View mode hides the edit affordances; the pencil (.editing) reveals them. */
.reel-carousel-pop .reel-edit-remove,
.reel-carousel-pop .reel-carousel-add,
.reel-carousel-pop .reel-carousel-actions { display: none; }
.reel-carousel-pop.editing .reel-edit-remove { display: flex; }
.reel-carousel-pop.editing .reel-carousel-add { display: block; }
.reel-carousel-pop.editing .reel-carousel-actions { display: flex; }
.reel-carousel-actions { gap: 10px; }
.reel-carousel-cancel, .reel-carousel-save {
    flex: 1; padding: 10px; border-radius: 12px; border: none; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
}
.reel-carousel-cancel { background: var(--al); color: var(--text); }
.reel-carousel-save { background: var(--am); color: #fff; }
.reel-add-url-input { width: 100%; margin-bottom: 0 !important; }
/* Dot on the vertical line: left=-32px from item (at 48px) → 16px from container left */
body.v2 .tl-dot {
    display: none;
}
/* Transit row between two cards — compact single-line "leg" style (small
   mode icon + plain time/distance text + a plain "Directions" link), with a
   dashed connector line behind it, instead of the old three chunky colored-
   pill elements. */
/* Outer row is now a column: the icon/text/Directions line on top, and (edit
   mode only) the insert-stop button centered alone on its own line below —
   rather than trying to cram all four into one row. */
body.v2 .transit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
body.v2 .transit-row-top {
    position: relative;
    /* 3-column grid mirroring the location card's own layout: a fixed left
       column that lines the transport icon up under the card's time badge,
       a centered middle column so the time estimate sits under the centered
       card title, and an equal-width right column for the Directions arrow.
       Padding matches the card's 14px horizontal padding so the columns
       actually align with the card content above/below. */
    display: grid;
    /* Left col (44px) centers the transport icon under the card's time badge;
       right col (32px) centers the Directions arrow under the card's top-right
       note/pencil button. The two differ by design because the badge and the
       note button sit at slightly different insets. */
    grid-template-columns: 44px 1fr 32px;
    align-items: center;
    min-height: 24px;
    padding: 2px 14px;
}
body.v2 .transit-row-top::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    border-top: 1.5px dashed var(--al);
    z-index: 0;
}
body.v2 .transit-row-top > * { position: relative; z-index: 1; }
body.v2 .transit-row-insert {
    display: flex;
    justify-content: center;
}
/* Standalone "+" below the last card (no transit leg above it) — a little top
   space so it doesn't crowd the card. */
body.v2 .transit-row--end-insert { margin-top: 6px; }
/* Small mode icon — the <select> itself is kept for real interaction (still
   how you change Driving/Walking/Train/Bus) but shrunk to an invisible
   overlay stacked exactly on the icon, tap targets the icon, no visible
   dropdown chrome. */
body.v2 .transit-mode-icon-wrap {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;   /* centered in the 44px grid column → under the time badge */
    width: 30px;
    height: 20px;
    background: var(--bg);
}
body.v2 .transit-mode-icon { font-size: 15px; color: var(--sub); pointer-events: none; }
/* Custom car SVG (matches route mode): inherits the mode colour via currentColor. */
body.v2 .transit-mode-icon--svg { display: inline-flex; align-items: center; justify-content: center; }
body.v2 .transit-mode-icon--svg svg { width: 19px; height: 19px; }
body.v2 .transit-row.mode-DRIVING .transit-mode-icon { color: #2B5A8A; }
body.v2 .transit-row.mode-WALKING .transit-mode-icon { color: #C0392B; }
body.v2 .transit-row.mode-TRAIN   .transit-mode-icon { color: #2E7A50; }
body.v2 .transit-row.mode-BUS     .transit-mode-icon { color: #C89B1C; }
body.v2 .transit-mode-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
body.v2 .transit-row .transit-text {
    /* Middle grid column — centered, so it lines up under the centered card
       title. Styled as a tinted pill (like the "Add Location" button) whose
       colour matches the transport mode; the per-mode rules below set the
       actual colour. The fill also masks the dashed connector line behind. */
    position: relative;
    z-index: 1;
    justify-self: center;
    text-align: center;
    padding: 4px 22px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    border-radius: 20px;
    cursor: pointer;
    /* Neutral fallback (a row with no recognised mode class). */
    color: var(--sub);
    background: var(--bg);
    border-color: var(--al);
}
/* Each mode's tint is layered OVER an opaque var(--bg) base so the pill fully
   masks the dashed connector line behind it (a bare rgba tint let the line
   show straight through). */
body.v2 .transit-row.mode-DRIVING .transit-text {
    color: #2B5A8A; border-color: rgba(43, 90, 138, 0.5);
    background: linear-gradient(rgba(43, 90, 138, 0.12), rgba(43, 90, 138, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-WALKING .transit-text {
    color: #C0392B; border-color: rgba(192, 57, 43, 0.5);
    background: linear-gradient(rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-TRAIN .transit-text {
    color: #2E7A50; border-color: rgba(46, 122, 80, 0.5);
    background: linear-gradient(rgba(46, 122, 80, 0.12), rgba(46, 122, 80, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-BUS .transit-text {
    color: #C89B1C; border-color: rgba(200, 155, 28, 0.5);
    background: linear-gradient(rgba(200, 155, 28, 0.12), rgba(200, 155, 28, 0.12)), var(--bg);
}
/* Directions arrow — a compact tap target in the right grid column (was the
   full "Directions" text, too tight now). */
body.v2 .transit-directions-link {
    position: relative;
    z-index: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    font-size: 16px;
    color: var(--am);
    cursor: pointer;
}
body.v2 .transit-directions-link i { color: var(--am) !important; }
body.v2 .transit-directions-link:active { opacity: 0.7; }
body.v2.dark .transit-directions-link { color: #8AB4F8; }
body.v2.dark .transit-mode-icon-wrap,
body.v2.dark .transit-text,
body.v2.dark .transit-directions-link { background: var(--bg); }
/* Edit-mode-only "add a stop here" button — same small grey circular icon
   button as the itinerary picker's .btn-schedule-icon, for visual
   consistency between the two "add a stop" affordances. */
body.v2 .transit-insert-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.v2 .transit-insert-btn:active { transform: scale(0.9); }

/* Modal */
body.v2 .modal-card { background: var(--white) !important; color: var(--text) !important; }
body.v2 .modal-title { color: var(--text) !important; }
body.v2 .modal-subtitle { color: var(--sub) !important; }

/* Toast */
body.v2 .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }

/* Date tab active color */
body.v2 .date-tab-btn.active { background: var(--am) !important; color: var(--white) !important; border-color: var(--am) !important; }
/* Dark mode: the bright light-blue --am read as too harsh here — match the
   dark-grey .time-badge ("12:00" timeline pills) instead for a more subdued,
   consistent dark-theme look. */
body.v2.dark .date-tab-btn.active { background: #3C3E42 !important; color: #E8EAED !important; border-color: #3C3E42 !important; }

    #itinerary-panel.extended .brand-row {
        position: relative;
    }

    #itinerary-panel.extended .brand-badge {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        pointer-events: none;
    }

    #itinerary-panel.extended #system-status-badge {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Master-Detail views style */
.detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 250px;
    text-align: center;
    padding: 20px;
    opacity: 0.6;
}

.detail-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-align: left;
    margin-top: 4px;
}

.detail-content .edit-form {
    display: block !important;
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 12px;
}

.detail-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
}

/* Homebase neon badge visual styling */
.basecamp-badge {
    background: rgba(56, 189, 248, 0.15);
    color: var(--color-interactive);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

#itinerary-panel.extended #empty-itinerary-message #btn-create-trip,
#itinerary-panel.extended #empty-itinerary-message #trip-creator-selector {
    display: none !important;
}

.itinerary-right-title {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 14px 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-location-picker-container-extended {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
}

/* Multi-Booking Layout & Items styling */
.booking-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-item-row {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.booking-item-row:hover {
    border-color: var(--color-logo-dot);
    box-shadow: 0 4px 12px rgba(144, 184, 224, 0.1);
}

.booking-item-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.btn-booking-item-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 11px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-booking-item-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-main);
    border-color: var(--color-logo-dot);
}

.booking-card-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
}

/* Collaboration History Dropdown styling */
.collab-history-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 105;
}

.collab-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collab-history-item {
    font-size: 11px;
    padding: 8px;
    border-radius: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    transition: background 0.2s, border-color 0.2s;
    max-width: 85%;
}

/* Own posts sit to the right (like a sent chat bubble); everyone else's
   activity sits to the left — mirrors _actorLabel()'s "You" vs. named crew. */
.collab-history-item--own {
    align-self: flex-end;
    background: rgba(205, 83, 96, 0.12);
    border-color: rgba(205, 83, 96, 0.35);
}
.collab-history-item--other {
    align-self: flex-start;
}

/* Card highlight flash animation */
@keyframes cardHighlightFlash {
    0% {
        background-color: rgba(67, 132, 150, 0.3);
        box-shadow: 0 0 15px rgba(67, 132, 150, 0.4);
    }
    100% {
        background-color: var(--color-bg-card);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
}

.card-highlight-flash {
    animation: cardHighlightFlash 2.0s ease-out;
}

/* Mobile map type cycle button — hidden by default (desktop uses the pill).
   Only revealed at the mobile peek state via the media query below. */
#map-type-mobile-btn {
    background: rgba(20, 33, 45, 0.88);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-main);
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: background 0.15s;
    line-height: 1;
}
#map-type-mobile-btn:hover {
    background: var(--color-primary);
}

/* Standard exit button inside the InfoWindow reel player.
   Replaces the floating 'x' — single clear control to leave the reel view. */
.btn-reel-exit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-reel-exit:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Desktop map-type selector (Road / Satellite / Terrain) */
#map-type-control {
    display: flex;
    gap: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 3px;
    margin: 10px 0 0 10px; /* offset from top-left corner */
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    /* Positioned inside the map by the Maps API (LEFT_TOP) */
}
#map-type-control button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
#map-type-control button.active,
#map-type-control button:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   V2 ITINERARY STYLING — clean timeline matching modern app design
   ══════════════════════════════════════════════════════════════════ */

/* Date block — white card with real elevation, not just a hairline border */
body.v2 .date-block {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius) !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    box-shadow: var(--elev-2) !important;
    overflow: hidden !important;
}

/* Date block header — subtle grey bar, day far-left, date centred, route btn far-right */
body.v2 .date-block h4,
body.v2 .date-block-header {
    position: relative !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    margin: 0 !important;
    padding: 10px 70px !important;
    border-bottom: 1px solid var(--al) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.date-label {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.date-day {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
}
/* In the timeline date-block header, pin day to far left */
body.v2 .date-block-header .date-day {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
}

/* Items inside date block */
/* Itinerary card — clean white, time badge on left */
body.v2 .location-item.itinerary-card {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 0 !important;
    box-shadow: var(--elev-1) !important;
    min-height: 48px !important;
}
body.v2 .location-item.itinerary-card:active { background: var(--bg) !important; transform: translateY(1px) scale(0.995) !important; box-shadow: none !important; }

/* Date items row spacing */
body.v2 .date-items-row {
    padding: 10px 6px 12px !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Time badge — left-side pill */
body.v2 .time-badge {
    background: var(--text) !important;
    color: var(--white) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.3px !important;
}

/* Card title row — itinerary: left-aligned (time | name), saved: centered */
body.v2 .itinerary-card .card-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
}
body.v2 .saved-card .card-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    position: relative !important;
}
body.v2 .saved-card .card-title-row strong {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    /* Symmetric side padding reserves room for the absolute pencil on the right
       (and keeps the name centred); long names ellipsis-truncate before it. */
    padding: 0 40px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body.v2 .saved-card .card-title-row .card-edit-btn {
    position: absolute !important;
    right: 0 !important;
    margin-left: 0 !important;
}
body.v2 .card-title-row strong {
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.3 !important;
    text-align: center !important;
    justify-content: center !important;
    flex: unset !important;
}
/* Itinerary cards: a 3-column grid — time badge (left), name TRULY centred
   (so it lines up with the centred transit time-estimate below it), and the
   note/pencil actions (right). Equal 1fr side columns are what force the name
   to the card's true centre regardless of the badge/button widths. */
body.v2 .itinerary-card .card-title-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 36px !important;
    gap: 8px !important;
}
body.v2 .itinerary-card .card-title-row .time-badge {
    flex-shrink: 0 !important;
    justify-self: start !important;
}
/* Untimed stops: invisible time pill that still reserves its width, so the
   name centers identically to timed stops. */
body.v2 .time-badge--empty { visibility: hidden !important; }

/* Archived trips: unarchive button on each archived pill, and the read-only
   banner at the top of an archived trip's timeline. */
body.v2 .trip-unarchive-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 20px;
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border: 1px solid var(--am); color: var(--am);
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body.v2 .trip-unarchive-btn:active { background: color-mix(in srgb, var(--am) 20%, transparent); }
/* Archived views are read-only and calm — kill entrance/hint animations
   (swipe wiggles, route-button pulse, pill pop-ins, etc.). Scoped to the
   itinerary page so a lingering class can't freeze animations elsewhere. */
body.archived-view #page-grouped *,
body.archived-view #page-grouped *::before,
body.archived-view #page-grouped *::after { animation: none !important; }
body.v2 .archived-trip-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--am) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--am) 35%, transparent);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--am);
}
body.v2 .archived-trip-banner > span { display: inline-flex; align-items: center; gap: 6px; }
body.v2 .archived-banner-unarchive {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 7px 12px; border-radius: 20px;
    background: var(--am); border: none; color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.v2 .archived-banner-unarchive:active { opacity: 0.85; }

/* Location-card ⋮ menu + pin-type bottom sheet (reached from that menu). */
body.v2 .pin-card-menu-sheet {
    position: relative;
    height: auto !important;
    max-height: 70vh !important;
    padding-bottom: 18px;
    background: var(--white);
    border-radius: 20px 20px 0 0;
}
body.v2 .pin-type-row--sheet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 6px 16px 14px;
}
body.v2 .itinerary-card .card-title-row strong {
    text-align: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Right column: note + pencil buttons grouped, pinned to the right edge. */
body.v2 .itinerary-card .card-title-row .card-title-actions {
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
/* Pencil edit button — rightmost flex item, always inside card */
.card-edit-btn {
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    color: var(--ad) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
    display: flex !important;
    align-items: center !important;
}
.card-edit-btn:active { color: var(--text) !important; }

/* Note toggle button — same footprint as the pencil, sits just left of it. */
.card-note-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    margin-left: 4px;
    cursor: pointer;
    color: var(--ad);
    font-size: 15px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
}
.card-note-btn:active { color: var(--text); }
/* The notes bar that drops open below the card title when the note button
   is tapped. */
.card-notes-view {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    text-align: left;
    word-break: break-word;
}
.card-notes-view p { margin: 0; }
.card-notes-view .empty-notes { color: var(--sub); }

/* Pin-type picker — first section of the location editor. Horizontal
   scrollable row of category icon buttons. */
.pin-type-picker { margin-bottom: 16px; }
.pin-type-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pin-type-row::-webkit-scrollbar { display: none; }
.pin-type-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 60px;
    padding: 8px 4px;
    background: var(--bg);
    border: 1.5px solid var(--al);
    border-radius: 12px;
    color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pin-type-btn i { font-size: 20px; }
.pin-type-btn .pin-type-glyph { display: inline-flex; align-items: center; justify-content: center; height: 20px; color: inherit; }
.pin-type-btn .pin-type-glyph svg { width: 20px; height: 20px; display: block; }
.pin-type-btn span {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.pin-type-btn:active { transform: scale(0.95); }
.pin-type-btn.active {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, transparent);
    color: var(--am);
}

/* Card collapse button — appears inside the edit form header */
.card-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    font-size: 14px;
    color: var(--icon);
    cursor: pointer;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
    align-self: flex-start;
}
.card-collapse-btn:active { background: var(--am); color: var(--white); }

/* Old transit-line hidden in v2 (replaced by timeline-container layout) */
body.v2 .transit-connector { display: none !important; }

/* Trip management row — hidden in v2 (navigation via back button) */
body.v2 .trip-management-row { display: none !important; }
body.v2 .trip-selector {
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* Empty itinerary state text colors */
body.v2 #empty-itinerary-message h3 { color: var(--text) !important; }
body.v2 #empty-itinerary-message p { color: var(--sub) !important; }

/* Date filter tab bar */
body.v2 #date-filter-tabs button {
    font-family: 'Outfit', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 POPUP CHIPS — ensure V2 palette even if V1 inline styles bleed
   ══════════════════════════════════════════════════════════════════ */
#all-popup .filter-chip {
    background: var(--bg) !important;
    border: 1.5px solid var(--al) !important;
    color: var(--sub) !important;
    border-radius: 50px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: 34px !important;
    transition: background 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
}
#all-popup .filter-chip.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: var(--white) !important;
}
#all-popup .country-header {
    background: var(--al) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}
#all-popup .country-header-label { color: var(--text) !important; font-weight: 600 !important; }
#all-popup .country-count { background: var(--am) !important; color: white !important; }
#all-popup .location-item {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}
#all-popup .location-item:active { background: var(--bg) !important; }
#all-popup .loc-name { color: var(--text) !important; font-weight: 600 !important; }
#all-popup .loc-country, #all-popup .loc-meta { color: var(--sub) !important; }
/* Hide the edit forms and action buttons inside popup items */
#all-popup .edit-form,
#all-popup .btn-trip-add-loc,
#all-popup .btn-trip-remove-loc { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   V2 FOLDER GRID — trip folder cards
   ══════════════════════════════════════════════════════════════════ */
.trip-management-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 2px;
}
.trip-management-bar .btn-trip-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border-radius: 50px;
    min-height: 44px;
    width: 100%;
    background: var(--am) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2);
    transition: all var(--transition);
}
.trip-management-bar .btn-trip-action:active {
    background: #2563EB !important;
    transform: scale(0.97);
}

/* Pencil edit icon overlaid on trip folder — positioned to top-right */
.folder-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: var(--icon);
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.folder-edit-icon:active { color: var(--text); }

.folder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 16px 32px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.trip-folder { min-width: 0; }

/* ── Itinerary pill list ── */
.trip-pill-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 32px;
}
.trip-pill {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    position: relative;
    column-gap: 10px;
    width: 100%;
    padding: 17px 18px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
    font-family: 'Inter', sans-serif;
    /* NOTE: --transition carries its own duration, so using it in the easing
       slot ("box-shadow .2s var(--transition)") parsed the 0.18s as a DELAY —
       every press felt 180ms late. Use the easing-only token. */
    transition: box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.trip-pill:active {
    background: var(--bg);
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.trip-pill--active {
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.09);
}

/* ── Redesigned itinerary trip card ─────────────────────────────────────────
   Left: square (1:1) country picture; badge/pencil bottom-left of it. Middle:
   name · dates · countdown (top) with pins pinned to the bottom-left. Star in
   the top-right corner. Overrides the old grid .trip-pill layout. */
.trip-pill.trip-card {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch;
    column-gap: 0;
    padding: 0;
    overflow: hidden;
    position: relative;                /* anchors the corner star */
    min-height: 116px;
}
/* Country picture on the LEFT, bleeding to the card's own edges. It used to be
   locked 1:1 and vertically centred, which was right when it held a PHOTO (a
   stretched photo looks wrong). Now it holds a flat gradient or a letterboxed
   flag, and the lock only left white slivers above and below a floating square
   with hard corners inside a rounded card. Stretching to the card's full height
   lets .trip-card's overflow:hidden round the left corners for us. */
.trip-card-flag {
    flex-shrink: 0; width: 116px; align-self: stretch; min-height: 116px;
    position: relative; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}
.trip-card-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-card-flag--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--am) 14%, var(--bg)), var(--bg)); }
.trip-card-flag-ph { font-size: 28px; color: var(--ad) !important; }
/* Badge / edit-pencil at the BOTTOM-RIGHT of the picture (slightly enlarged). */
.trip-card-flag-badge { position: absolute; bottom: 8px; right: 8px; z-index: 2; }
.trip-card .trip-pill-collab-badge {
    position: static; margin: 0 !important;
    width: 30px; height: 30px; font-size: 15px;
    box-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.trip-card-editpencil {
    display: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--white); align-items: center; justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: pointer;
}
.trip-card-editpencil i { font-size: 15px; color: var(--am) !important; }
body.trip-edit-active .trip-card-collab { display: none; }
body.trip-edit-active .trip-card-editpencil { display: flex; }

/* Top-right of the picture: duplicate-trip button (edit mode only). */
.trip-card-dupbtn {
    display: none; position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--white); align-items: center; justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: pointer;
}
.trip-card-dupbtn i { font-size: 15px; color: var(--am) !important; }
body.trip-edit-active .trip-card-dupbtn { display: flex; }

/* Duplicate-trip name sheet */
.trip-dup-box { max-width: 340px; }
.trip-dup-input {
    width: 100%; box-sizing: border-box; margin: 4px 0 14px;
    padding: 12px 14px; border-radius: 12px; font-size: 15px;
    border: 1.5px solid var(--border, #d8dbe0); background: var(--card, #fff);
    color: var(--text, #111); outline: none;
}
.trip-dup-input:focus { border-color: var(--am); }
.trip-dup-actions { display: flex; gap: 10px; justify-content: flex-end; }
.trip-dup-cancel, .trip-dup-go {
    padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
    border: none; cursor: pointer;
}
.trip-dup-cancel { background: var(--chip, #eef0f3); color: var(--text, #111); }
.trip-dup-go { background: var(--am); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.trip-dup-go:disabled { opacity: .7; }

/* ── First-run "Get started" checklist ─────────────────────────────────────
   Sits above the trip toolbar until every step is ticked or it's dismissed.
   A persistent checklist rather than a slide-through tour: it teaches by
   doing, and each row deep-links to the thing it's describing. */
.onboard-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
    padding: 14px 14px 6px;
    margin: 0 0 14px;
    box-sizing: border-box;
}
.onboard-head { display: flex; align-items: center; gap: 8px; }
.onboard-title {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--text); flex: 1; min-width: 0;
}
.onboard-progress {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11.5px;
    color: var(--sub); background: var(--bg);
    border-radius: 999px; padding: 2px 8px; flex: none;
}
.onboard-dismiss {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    border: none; background: none; color: var(--ad);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.onboard-dismiss i { font-size: 13px; color: var(--ad) !important; }
.onboard-dismiss:active { background: var(--bg); }
.onboard-bar {
    height: 4px; border-radius: 999px; background: var(--al);
    margin: 10px 0 4px; overflow: hidden;
}
.onboard-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--am); transition: width .3s var(--ease-std, ease);
}
.onboard-steps { list-style: none; margin: 0; padding: 0; }
.onboard-step { border-bottom: 1px solid var(--al); }
.onboard-step:last-child { border-bottom: none; }
.onboard-step-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 0; border: none; background: none; cursor: pointer;
    text-align: left; -webkit-tap-highlight-color: transparent;
}
.onboard-tick {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg); color: var(--ad);
    display: inline-flex; align-items: center; justify-content: center;
}
.onboard-tick i { font-size: 12px; color: var(--ad) !important; }
.onboard-step-label {
    flex: 1; min-width: 0;
    font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 600;
    color: var(--text); line-height: 1.35;
}
.onboard-step-go { flex: none; font-size: 14px; color: var(--ad) !important; }
/* Hint text: always visible for the OUTSTANDING steps (that's the teaching
   part), collapsed once a step is done so the card shrinks as you progress. */
.onboard-step-hint {
    font-size: 12px; color: var(--sub); line-height: 1.45;
    padding: 0 0 11px 32px; margin-top: -4px;
}
.onboard-step--done .onboard-tick { background: var(--am); }
.onboard-step--done .onboard-tick i { color: #fff !important; }
.onboard-step--done .onboard-step-label { color: var(--sub); text-decoration: line-through; }
.onboard-step--done .onboard-step-hint { display: none; }
.onboard-step--done.onboard-step--open .onboard-step-hint { display: block; }
body.v2.dark .onboard-card { background: #1B1D21; border-color: #3C3E42; }

/* Middle column: name/dates/countdown, vertically centred and spaced out. */
.trip-card .trip-card-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 16px 44px 16px 16px; text-align: left;
}
/* Tighter between the three text lines (they read as one block) than between
   that block and the country chips below it — see .trip-card-countries. */
.trip-card-info-top { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trip-card-name {
    font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 700; color: var(--text);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-card-dates { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); }
.trip-card-dates i { font-size: 13px; }
.trip-card-dates--none { color: var(--ad); }
.trip-card-countdown { font-size: 12px; font-weight: 700; color: var(--am); }
/* Every country the trip touches, as chips under the countdown. Wraps to a
   second line rather than truncating — on a two-country trip the second country
   is the whole point of the row. margin-top adds to the 6px column gap so the
   chips sit apart from the name/dates/countdown block above them. */
.trip-card-countries {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px;
    margin-top: 3px; min-width: 0;
}
.trip-card-country {
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%; box-sizing: border-box;
    padding: 2px 8px; border-radius: 999px;
    background: var(--chip, #eef0f3); color: var(--sub);
    font-size: 11.5px; font-weight: 600; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-card-country-flag { font-size: 12px; line-height: 1; }
/* Pins pinned to the BOTTOM-RIGHT corner of the card. */
.trip-card-stats { position: absolute; bottom: 12px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 12px; }
.trip-card-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.trip-card-stat .ph-map-pin { color: #e53935 !important; }
/* Favorite star — blended into the top-right corner (no background). */
.trip-card .trip-card-star {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    padding: 8px; font-size: 20px;
}

/* Trip picture picker (from the pencil in edit mode). */
.trip-img-picker-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,.5);
}
/* The GRID scrolls, not the whole sheet — a multi-country trip offers every
   cached photo from every country, which is a long list, and the "Choose a
   picture" header has to stay put while you scroll through it. */
.trip-img-sheet {
    background: var(--white); width: 100%; max-width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh; overflow: hidden;
    display: flex; flex-direction: column; min-height: 0;
}
.trip-img-head { flex: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); }
.trip-img-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }

/* ── Trip cover picker: colour + up to 3 emoji ────────────────────────────── */
/* Live preview of exactly what the card will render. Reuses .trip-card-flag so
   the preview and the real card share one set of rules and cannot drift.
   min-height:0 undoes .trip-card-flag's 116px floor, which would otherwise win
   over this height and make the preview taller than it is wide. */
.trip-cover-preview-row { flex: none; display: flex; justify-content: center; margin-bottom: 10px; }
.trip-cover-preview {
    width: 104px; height: 104px; min-height: 0; border-radius: 14px; overflow: hidden;
    background: var(--bg); position: relative; flex: none; align-self: center;
}
/* The emoji band. data-n shrinks the glyphs as more are added so three still
   fit side by side inside the square without clipping. */
.trip-cover-emoji {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: 2px; line-height: 1;
}
.trip-cover-emoji-ch { line-height: 1; }
.trip-card-flag .trip-cover-emoji[data-n="1"] .trip-cover-emoji-ch { font-size: 40px; }
.trip-card-flag .trip-cover-emoji[data-n="2"] .trip-cover-emoji-ch { font-size: 30px; }
.trip-card-flag .trip-cover-emoji[data-n="3"] .trip-cover-emoji-ch { font-size: 23px; }
.trip-cover-preview .trip-cover-emoji[data-n="1"] .trip-cover-emoji-ch { font-size: 50px; }
.trip-cover-preview .trip-cover-emoji[data-n="2"] .trip-cover-emoji-ch { font-size: 36px; }
.trip-cover-preview .trip-cover-emoji[data-n="3"] .trip-cover-emoji-ch { font-size: 27px; }
/* Scrollable body between the preview and the Save row — the ONE scroll
   container in the sheet, so the ~190 flags scroll with the palette above them
   rather than trapping a second nested scroll. */
#trip-cover-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.trip-cover-emoji-label { display: flex; align-items: center; gap: 6px; }
.trip-cover-count { font-size: 11px; font-weight: 700; color: var(--sub); }
.trip-cover-group-label {
    font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ad);
    margin: 12px 0 6px;
}
.trip-cover-emoji-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.trip-cover-emoji-opt {
    padding: 0; border: 2px solid transparent; border-radius: 10px;
    aspect-ratio: 1; background: var(--bg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.trip-cover-emoji-opt.active { border-color: var(--am); background: color-mix(in srgb, var(--am) 10%, var(--bg)); }
.trip-cover-actions { flex: none; display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* Square crop mask for non-avatar crops (trip cover) — the crop output is the
   same square bounding box; only the visible mask shape changes from circle. */
.photo-editor--square .photo-editor-ring { border-radius: 12px; }
body.v2.dark .trip-img-sheet { background: #1B1D21; }

/* Saved-card kebab menu divider (before the destructive Unpin item). */
.saved-card-menu-sep { height: 1px; background: var(--border-soft); margin: 5px 8px; }

/* Add-to-trip sheet */
.addtrip-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 14px; }
.addtrip-date-row label { font-size: 13px; font-weight: 700; color: var(--text); font-family: 'Outfit', sans-serif; }
.addtrip-date-row label span { color: var(--sub); font-weight: 500; }
.addtrip-date { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; background: var(--bg); color: var(--text); font-size: 14px; }
.addtrip-list { display: flex; flex-direction: column; gap: 6px; }
.addtrip-trip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--white); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); font-family: 'Outfit', sans-serif; }
.addtrip-trip > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addtrip-trip > i:first-child { font-size: 18px; color: var(--am); flex-shrink: 0; }
.addtrip-go { font-size: 15px; color: var(--sub); flex-shrink: 0; }
.addtrip-trip:active { background: var(--bg); }
.addtrip-trip.picking { opacity: .5; pointer-events: none; }

/* Share-to-followers sheet */
.share-follower-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.share-follower { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: none; background: none; cursor: pointer; border-radius: 12px; }
.share-follower:active { background: var(--bg); }
.share-follower.selected { background: color-mix(in srgb, var(--am) 10%, transparent); }
.share-follower-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bg); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.share-follower-av img { width: 100%; height: 100%; object-fit: cover; }
.share-follower-av i { font-size: 26px; color: var(--sub); }
.share-follower-name { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.share-follower-name b { font-size: 14.5px; color: var(--text); font-family: 'Outfit', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-follower-name span { font-size: 12.5px; color: var(--sub); }
.share-follower-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-soft); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.share-follower.selected .share-follower-check { background: var(--am); border-color: var(--am); color: #fff; }
.share-follower-check i { font-size: 14px; }
.share-send-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border: none; border-radius: 14px; background: var(--am); color: #fff; font-size: 15px; font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer; }
.share-send-btn:disabled { opacity: .45; cursor: default; }
.share-send-btn i { font-size: 18px; }

/* Unpin choice sheet */
.unpin-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--white); cursor: pointer; margin-bottom: 8px; text-align: left; }
.unpin-choice > i { font-size: 20px; color: var(--text); flex-shrink: 0; }
.unpin-choice span { display: flex; flex-direction: column; min-width: 0; }
.unpin-choice span b { font-size: 14.5px; color: var(--text); font-family: 'Outfit', sans-serif; }
.unpin-choice span span { font-size: 12px; color: var(--sub); font-weight: 500; }
.unpin-choice:active { background: var(--bg); }
.unpin-choice--danger > i { color: #E5484D; }
.unpin-choice--danger span b { color: #E5484D; }

.trip-pill-left {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: stretch; /* fill grid col 1 so the badge can center within it */
    width: 100%;
}
.trip-star {
    font-size: 20px;
    color: #F4B400;
    flex-shrink: 0;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.15s;
}
/* Right group (stops count + chevron) — grid col 3, pinned right */
.trip-pill-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
.trip-star.country-star--active { color: #f59e0b !important; transform: scale(1.15); }
/* Icon lives in an inner <i class="ph ph-star">, which body.v2 i[class*="ph-"]
   colours directly — so colour the <i>, not just the span, to win over it. */
.trip-star i { color: #F4B400 !important; }
.trip-star.country-star--active i { color: #f59e0b !important; }
.trip-selected {
    border-color: var(--am) !important;
    background: #EBF5FF !important;
    box-shadow: 0 0 0 2px var(--am) !important;
}
.trip-pill-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.trip-pill-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.trip-pill-arrow {
    font-size: 14px !important;
    color: var(--ad) !important;
    flex-shrink: 0;
}
/* Pin-count marker icons across the itinerary/pins/day cards are red to match
   the map's saved-pin markers. */
.trip-pill-meta .ph-map-pin,
.alldays-count .ph-map-pin { color: #e53935 !important; }
/* Collab badge — just the icon, colored to match the pill's own outline
   (no ring/circle around it). Owner red, guest/collaborator blue.
   !important needed to beat the dark-mode .trip-pill border-color
   override further up the sheet, and the global Phosphor icon color
   reset (body.v2 i[class*="ph-"]) for the icon color. */
/* Collab role marker — a tidy tinted avatar disc (not a full-card outline,
   which read like an error state). Owner = red ring, guest = blue ring. The
   colored ring + soft tint reads as "who owns this" without shouting. */
.trip-pill-collab-badge {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    /* Left-anchor the badge a fixed distance from the star. Column 1 (1fr) has
       a fixed left edge but its right edge shrinks as the centered name grows,
       so centering the badge here made it drift with name length. margin-right
       auto keeps it pinned just right of the star regardless of the name. */
    margin-left: 8px;
    margin-right: auto;
}
/* No more full-card colored border — the disc carries the signal now. */
.trip-pill--collab-owner .trip-pill-collab-badge { background: #FDECEC; border-color: #F2A6A6; }
.trip-pill--collab-owner .trip-pill-collab-badge i { color: #E23B3B !important; }
.trip-pill--collab-guest .trip-pill-collab-badge { background: #E9F1FE; border-color: #A7C6F5; }
.trip-pill--collab-guest .trip-pill-collab-badge i { color: #2E74E8 !important; }
body.v2.dark .trip-pill--collab-owner .trip-pill-collab-badge { background: rgba(226,59,59,.16); border-color: rgba(226,59,59,.55); }
body.v2.dark .trip-pill--collab-guest .trip-pill-collab-badge { background: rgba(46,116,232,.16); border-color: rgba(46,116,232,.55); }

/* Date-picker pills (itinerary day filter: All Days / Sep 7 / …). Idle pills
   are white with a soft lift; the active day fills with the accent, lifts, and
   glows so the current day is unmistakable. */
.date-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    color: var(--sub);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.2px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.06);
    transition: background .18s, color .18s, box-shadow .18s, transform .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
}
.date-tab-pill i { font-size: 13px; }
.date-tab-pill:active { transform: translateY(1px) scale(0.97); }
.date-tab-pill--active {
    background: var(--am);
    border-color: var(--am);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26,115,232,.34), 0 8px 18px rgba(26,115,232,.22);
}
.date-tab-pill--active i { color: #fff !important; }
body.v2.dark .date-tab-pill--active {
    background: #3C3E42;
    border-color: #4A4D52;
    color: #E8EAED;
    box-shadow: var(--elev-2);
}
body.v2.dark .date-tab-pill--active i { color: #E8EAED !important; }

.trip-folder {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.trip-folder:active .folder-art { transform: scale(0.96); }

.folder-art {
    width: 100%;
    aspect-ratio: 1 / 0.9;
    position: relative;
    transition: transform 0.15s;
    margin-bottom: 8px;
}

/* Folder tab — slim accent bar at top */
.folder-tab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--al);
    border-radius: 14px 14px 0 0;
    z-index: 1;
}
.trip-folder--active .folder-tab { background: var(--am); }

/* Folder body — clean rounded card */
.folder-body {
    position: absolute;
    inset: 0;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 10px 26px;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.trip-folder--active .folder-body {
    border-color: var(--am);
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

.folder-flags { display: none; }
.folder-dots { display: none; }
.folder-dot { display: none; }
.folder-dot-more { display: none; }

/* Trip name inside the folder body */
.folder-name-inside {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    line-height: 1.3;
    max-width: 90%;
    word-break: break-word;
}

/* Collab row — positioned to bottom-left of folder body */
/* Unified collab pill button inside folder card */
.folder-collab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1.5px solid var(--am);
    border-radius: 12px;
    padding: 1px 5px 1px 1px;
    height: 22px;
    cursor: pointer;
    transition: background 0.15s;
}
.folder-collab-pill:hover {
    background: var(--am);
}
.folder-collab-pill .folder-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    object-fit: cover;
    font-family: 'Outfit', sans-serif;
    font-size: 8px;
    font-weight: 700;
    background: var(--am);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.folder-collab-pill i {
    font-size: 9px;
    color: var(--text);
}

/* Bottom row: location count badge */
.folder-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}
.folder-count-badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
}

.folder-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.folder-meta { display: none; }
.folder-active-badge { display: none; }

/* Reels folder cards — a long horizontal "file folder" per folder (colored
   gradient, small tab notch), stacked in a single column. Height matches a
   carousel reel tile (140px wide, 9:16 portrait ≈ 249px tall) so an
   expanded folder's tiles read as roughly the same scale as the collapsed
   card that opened them. Tapping a card expands its tile carousel inline
   right below it (accordion — see _expandedReelsFolderKey in app.js)
   instead of navigating to a separate page, which is what keeps every
   other folder's card in the DOM as a live cross-folder drop target. */
.reels-folder-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 10px 16px 32px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.reels-folder-card {
    position: relative;
    width: 100%;
    height: 115px;
    max-height: 115px;
    border-radius: 20px;
    box-shadow: var(--elev-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: visible;
    transition: transform 0.15s, opacity 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s ease;
    margin-top: 10px;
}
.reels-folder-card:active { transform: translateY(1px) scale(0.98); box-shadow: var(--elev-2); }
/* Tapped-open transition: the card fades + scales away first (enterReelsFolder
   in app.js adds this class, waits for the transition to finish, then swaps
   to the carousel) so opening a folder reads as "the folder closes, then
   the carousel opens" instead of an instant, jarring swap. Deliberately NOT
   animating max-height/margin here (an earlier version did) — this card has
   overflow:visible (needed for the folder-tab notch poking above it), so a
   shrinking max-height doesn't actually clip/collapse its contents smoothly
   the way it would with overflow:hidden; it just let the box shrink under
   still-full-size content, which read as a snap near the end instead of a
   smooth fade. A plain opacity+scale fade in place looks smooth throughout,
   and the one-frame height jump when loadReels() finally swaps this card
   for the carousel is far less noticeable than a broken mid-fade snap.
   Also keep box-shadow untouched here — it's already used by the drag-over
   affordance below and shouldn't animate alongside this unrelated close
   transition. */
.reels-folder-card--closing {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
    /* Promote to its own GPU layer for the animation so the card's gradient
       fill + elev-3 shadow are rasterized once and merely composited each
       frame, instead of repainting the whole (expensive) card per frame —
       that repaint was the source of the open/close jank on mobile. */
    will-change: opacity, transform;
}

/* Small folder-tab notch, top-left — same trick as a real file-folder icon:
   a slightly narrower, same-colored block sitting above the main body so
   the silhouette reads as a folder, not just a rounded rectangle. */
/* Folder tab removed for now — cards/folders are plain rounded rectangles. */
.reels-folder-tab,
.reels-folder-open-tab { display: none; }

.reels-folder-card-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The global Phosphor icon-color reset (body.v2 i[class*="ph-"]) otherwise
   wins over this button's own color:#fff, since it targets the <i> element
   directly rather than inheriting — the "⋮" was rendering dark/near-
   invisible against the darker gradient folders without this. */
.reels-folder-card-menu i { color: #fff !important; }
.reels-folder-card-bottom {
    position: absolute;
    inset: 0;
    padding: 0 44px; /* clear the ⋮ menu / collab avatar in the corners */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    pointer-events: none; /* taps fall through to the card */
}
.reels-folder-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reels-folder-card-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

/* Collab bubble stack — bottom-right corner, opposite the name/count. */

/* Expanded accordion body — the folder's real tile carousel, rendered right
   below its card instead of on a separate page. Animates in on its own
   (fade + slight drop) each time it mounts, which — combined with
   .reels-folder-card--closing's shrink-away on the tapped card just before
   this replaces it — reads as "the folder closes, then the carousel opens"
   rather than an instant swap. */
.reels-folder-list .reels-section {
    margin-top: -6px;
    padding: 0 2px;
    /* Slow, gentle fade-open: longer duration + soft ease + a small drop only
       (no scale — the scale-up was what made it "pop"/flash). Reads as the
       carousel easing into view rather than snapping in. */
    animation: reelsSectionEnter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    will-change: opacity, transform;
}
@keyframes reelsSectionEnter {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.reels-folder-list .reels-carousel { padding: 0; }
/* Collapsing back to the grid — added by enterReelsFolder just before it
   swaps back, mirrors reelsSectionEnter in reverse. Timing matches
   .reels-folder-card--closing's 0.22s so the two halves of either
   transition (opening: card away → carousel in; closing: carousel away →
   card back) feel like one consistent motion rather than two different
   speeds stitched together. */
.reels-folder-list .reels-section--closing {
    animation: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity, transform;
}

/* Drag-over "minimize + shake" affordance — a folder card currently
   underneath a dragged reel tile shrinks and jiggles continuously, the same
   "this can accept a drop" cue as an iOS home-screen folder icon wiggling
   while you're rearranging apps. Added/removed live by the shared
   onDragMove Sortable hook in app.js. No added ring/box-shadow here (an
   earlier version had one) — it read as an extra colored background
   plate sitting behind the card once shrunk, competing with the actual
   drag ghost preview instead of just quietly indicating the drop target;
   the shrink+jiggle alone is a clear enough cue on its own. */
.reels-folder-card.reels-folder-drag-over {
    animation: reelsFolderDragShake 0.45s ease-in-out infinite;
}
@keyframes reelsFolderDragShake {
    0%, 100% { transform: scale(0.9) rotate(0deg); }
    25% { transform: scale(0.9) rotate(-2.5deg); }
    75% { transform: scale(0.9) rotate(2.5deg); }
}

/* Back button in timeline view */
.timeline-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--sub);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    -webkit-tap-highlight-color: transparent;
}
.timeline-back-btn:active { background: var(--al); }

/* ══════════════════════════════════════════════════════════════════
   V2 REELS TAB
   ══════════════════════════════════════════════════════════════════ */
.reels-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 32px;
}

.reels-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--sub);
    gap: 12px;
    font-size: 14px;
}

/* Share instructions in Reels empty state */
.share-instructions {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 14px;
    padding: 16px;
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    text-align: left;
}
.share-step-num {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--text);
    color: var(--white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
}

/* ── 2-column vertical preview grid ── */
.reels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* 3-column portrait grid for flat reels feed */
.reels-grid-portrait {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
}
.reel-tile-portrait {
    aspect-ratio: 9 / 14 !important;
    border-radius: 12px !important;
}

/* Note overlay at bottom of live tile */
.reel-tile-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 6px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 2;
}
.reel-tile-label {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Itinerary timeline cards: swipe reveals a delete/replace button underneath
   instead of firing blind — the card (foreground) slides over these. */
.itinerary-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.itinerary-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    border: none;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}
.itinerary-swipe-action--delete { left: 0; background: #ef4444; }
.itinerary-swipe-action--replace { right: 0; background: #3b82f6; }
.itinerary-card-wrap .location-item.itinerary-card { position: relative; z-index: 1; }
/* Raised above the card/pill while its side is revealed, so a tap during the
   snap-into-place transition can't fall through to the card/pill underneath.
   Shared class — used by both itinerary card and date-pill action buttons. */
.swipe-reveal-active { z-index: 2 !important; }

/* Date pills (top tab bar + "All Days" headers): swipe reveals a delete
   button underneath instead of firing blind, matching the timeline cards. */
.pill-swipe-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: inline-flex;
    flex-shrink: 0;
}
.pill-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}
.pill-swipe-action--delete { left: 0; background: #ef4444; }
.pill-swipe-action--change-date { right: 0; background: #3b82f6; }
.pill-swipe-wrap > button:not(.pill-swipe-action) { position: relative; z-index: 1; }

/* One-time discoverability wiggle on the first date/timeline pill so users
   notice the swipe-to-reveal gesture exists. */
@keyframes swipeHintWiggle {
    /* Slide far enough to expose ~78% of the 64px action buttons on each side,
       holding briefly on each so the delete (left) and replace/change-date
       (right) buttons are clearly visible before snapping back. */
    0%   { transform: translateX(0); }
    14%  { transform: translateX(50px); }
    36%  { transform: translateX(50px); }
    58%  { transform: translateX(-50px); }
    80%  { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}
.swipe-hint-wiggle {
    animation: swipeHintWiggle 2s ease 0.4s;
}

/* Date pill's swipe-left "change date" action — a small centred sheet with a
   real, visible date input rather than trying to silently trigger the native
   picker on a hidden proxy element (unreliable on some mobile browsers). */
.change-date-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.change-date-sheet {
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.change-date-label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.change-date-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--al);
    font-size: 14px;
}
.change-date-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.change-date-actions button { flex: 1; }
/* The per-day change-date cascade choice sheet (change-date is reached via the
   day pill's swipe action; the standalone "Set date" button was removed). */
.change-date-choice { display: flex; flex-direction: column; gap: 8px; }
.cd-choice {
    display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
    padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-soft);
    background: var(--white); cursor: pointer;
}
.cd-choice:active { background: var(--bg); }
.cd-match { border-color: var(--am); }
.cd-choice-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.cd-sub { font-size: 11.5px; color: var(--sub); padding-left: 24px; }

/* Swipe-left-to-replace picker (trip timeline cards) */
.replace-pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    animation: fadeIn var(--dur-fast) ease;
}
.replace-pin-sheet {
    background: var(--white, #fff);
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--elev-4);
    /* Was a hard pop-in with no motion at all — now rides up on the sheet curve. */
    animation: sheetUp var(--dur-slow) var(--ease-sheet);
}
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.replace-pin-sheet-body {
    overflow-y: auto;
}
.replace-pin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--al, #e5e7eb);
    color: var(--text, #202124);
}
.replace-pin-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--sub, #64748b);
    cursor: pointer;
    padding: 4px;
}
/* Klook admin pin list — taller sheet (was capped at the shared 88vh, cramped
   once there are more than a couple pins) + a vertical pill-bar list instead
   of the old 3-per-row photo-tile carousel, which broke down to overlapping
   icons whenever a tile's photo failed to load. Title-only rows with inline
   hide/delete icons are far more robust and scannable for an admin list. */
.klook-admin-sheet { max-height: 94vh; }
.klook-admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 12px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.klook-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg, #f1f3f4);
    border-radius: 999px;
    padding: 4px;
}
.klook-admin-row--hidden { opacity: 0.55; }
.klook-admin-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 14px;
    text-align: left;
    cursor: pointer;
}
.klook-admin-row-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #202124);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.klook-admin-row-badge {
    flex-shrink: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 999px;
}
.klook-admin-row-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--white, #fff);
    color: var(--icon, #5f6368);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.klook-admin-row-icon--danger { color: #ef4444; }
.klook-admin-row-icon:active { opacity: 0.7; }

/* Klook popup body — gradient grey instead of flat light-orange */
.klook-popup-body {
    background: linear-gradient(180deg, #F5F6F7 0%, #E3E5E8 100%);
}
/* Dark mode: the chips/notes card below used var(--white), which is a
   near-black surface color in dark mode — reading as flat black instead of
   the intended grey card look. Use the mid-grey --al surface instead, with
   the body gradient darkened to match. */
body.v2.dark .klook-popup-body {
    background: linear-gradient(180deg, #2D2F33 0%, #232527 100%);
}
body.v2.dark .klook-meta-chip {
    background: #3C3E42;
    color: #8AB4F8;
}
body.v2.dark .klook-meta-chip--muted { color: #9AA0A6; }
body.v2.dark .klook-notes-card {
    background: #3C3E42;
    color: #E8EAED;
}

/* Klook-branded accents — scoped to #klook-popup-overlay only, since
   .klook-meta-chip/.klook-notes-card/.klook-popup-body are shared with the
   regular (non-Klook) pin notes panel elsewhere on the map. Must not leak
   Klook's orange/teal/gold palette onto ordinary users' own pins. */
#klook-popup-overlay .klook-popup-body {
    /* Yellow-to-orange wash — a genuine hue shift (not just a lighter tint
       of the same orange) settling into Klook's brand orange (#FF5B00),
       instead of continuing past it into a much darker burnt-orange tone. */
    background: linear-gradient(180deg, #FFCB4D 0%, #FF5B00 100%);
}
#klook-popup-overlay .klook-meta-chip--rating {
    color: #A85200;
    box-shadow: 0 1px 4px rgba(245,166,35,0.3);
}
#klook-popup-overlay .klook-meta-chip--website {
    color: #00695C;
    box-shadow: 0 1px 4px rgba(0,191,174,0.3);
}
/* Frosted-glass notes card (teal gradient sampled from the Klook logo's
   swirl accent) + rounder corners — widened by the same -6px bleed as
   .klook-reel-row so both sections line up edge-to-edge. Deliberately NOT
   overridden in dark mode (no body.v2.dark variant below) so it reads
   identically regardless of theme, same as the top close/save-pin buttons. */
#klook-popup-overlay .klook-notes-card {
    /* Teal-to-blue wash — starts at the sampled Klook swirl teal
       (#00CBD0) and shifts into blue, reverse direction of the orange
       body wash above. */
    background: linear-gradient(135deg, rgba(0,203,208,0.88) 0%, rgba(74,144,255,0.85) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-left: -6px;
    margin-right: -6px;
}
body.v2.dark #klook-popup-overlay .klook-popup-body {
    background: linear-gradient(180deg, #4A2410 0%, #7A3D14 100%);
}
body.v2.dark #klook-popup-overlay .klook-meta-chip--rating { color: #F5A623; }
body.v2.dark #klook-popup-overlay .klook-meta-chip--website { color: #4DD8C9; }

/* Title row (name + rating badge, overlaid on the top photo) and the
   purple-gradient affiliate CTA button — purple sampled from the Klook
   logo's swirl accent. Single definition, no dark-mode variant, so these
   stay identical regardless of theme. */
#klook-popup-overlay .klook-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
}
#klook-popup-overlay .klook-title-rating {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
#klook-popup-overlay a.klook-title-rating:hover {
    text-decoration: underline;
}
#klook-popup-overlay .klook-cta-wrap {
    position: relative;
    margin-top: 14px;
    margin-left: -6px;
    margin-right: -6px;
}
#klook-popup-overlay .klook-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(77,64,202,0.35);
    -webkit-tap-highlight-color: transparent;
}
#klook-popup-overlay .klook-cta-btn:active { opacity: 0.85; }

/* Same purple CTA, unscoped — for a Klook pin the user has saved to their own
   Pins, rendered inside the standard (non-Klook-styled) saved-pin popup's
   notes panel, at the bottom of the note section. */
.loc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(77,64,202,0.35);
    -webkit-tap-highlight-color: transparent;
}
.loc-cta-btn:active { opacity: 0.85; }
/* Discount bubble — a small rotated sticker-style badge floating at the
   button's top-right corner, echoing the red "% OFF" callouts used on
   Klook's own promo tiles. Only rendered when discount_percent is set. */
#klook-popup-overlay .klook-discount-badge {
    position: absolute;
    top: -10px;
    right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transform: rotate(8deg);
    white-space: nowrap;
}

/* Klook admin photo crop modal — upload → pan/zoom within a fixed-ratio
   viewport → canvas-render at 2x that ratio → upload as the cached photo. */
.klook-crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.klook-crop-sheet {
    background: var(--white, #fff);
    border-radius: 16px;
    width: 92%;
    max-width: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.klook-crop-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.klook-crop-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    touch-action: none;
    cursor: grab;
    margin: 0 auto;
}
.klook-crop-viewport:active { cursor: grabbing; }
#klook-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.klook-crop-zoom-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sub);
    align-self: flex-start;
}
#klook-crop-zoom { width: 100%; }

/* Full-size "view current picture" lightbox for the admin edit form's tiny
   48x48 thumbnail. */
.klook-photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.klook-photo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.klook-photo-lightbox-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Deeper card shadow + a thin multi-color top accent strip (echoes the
   logo's purple/teal/orange/gold blobs) — .reel-popup-card is shared with
   the generic reel viewer too, so this stays scoped to the Klook popup. */
#klook-popup-overlay .reel-popup-card {
    box-shadow: 0 0 0 1px rgba(255,91,0,0.18),
                0 4px 10px rgba(0,191,174,0.14),
                0 10px 26px rgba(79,63,224,0.12),
                0 20px 48px rgba(0,0,0,0.24);
}
#klook-popup-overlay .reel-popup-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4F3FE0 0%, #00BFAE 35%, #FF5B00 68%, #F5A623 100%);
    z-index: 2;
}

/* Rating/phone/website "islands" — each its own background chip, generously
   spaced, instead of plain stacked text. Shared by the popup and the admin
   edit form's preview. */
.klook-meta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2px 0 12px;
}
.klook-meta-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--white, #fff);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue, #2C4A6E);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.klook-meta-chip:active { opacity: 0.7; }
.klook-meta-chip--muted { color: var(--sub, #6b7280); cursor: default; }

/* Up to 3 reel-preview tiles, evenly spaced */
.klook-reel-row {
    display: flex;
    gap: 8px;
    margin: 4px -6px 0;
}
.klook-reel-tile { position: relative; }

/* Solid white background island for notes text, matching the meta chips.
   Capped height — long notes scroll within this card alone instead of
   stretching the whole popup panel. */
.klook-notes-card {
    background: var(--white, #fff);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Rich-text notes content — base weight is normal (not forced bold like the
   old plain-text rendering), with explicit <b>/<strong> and <h4> markup
   (applied per word/phrase in the admin editor) standing out from the rest. */
.klook-notes-rich {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-wrap;
    /* White — the card's notes panel is a teal→blue gradient (see
       .klook-notes-card above), dark text loses contrast against the darker
       blue end. */
    color: #fff;
}
.klook-notes-rich b, .klook-notes-rich strong { font-weight: 800; }
/* Inline, not block — heading is applied to whatever text run the admin
   selected (same as bold), which may be only part of a line. A heading that
   *is* a whole paragraph still reads on its own line since it's already the
   sole content of its own <p>/<div> from the editor. */
.klook-notes-rich h4 {
    display: inline;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
.klook-notes-rich p, .klook-notes-rich div { margin: 0 0 8px; }
.klook-notes-rich p:last-child, .klook-notes-rich div:last-child { margin-bottom: 0; }

/* Admin notes editor — contenteditable box + a formatting toolbar BELOW it
   (so tapping a button doesn't cover the text being formatted), standing in
   for the old plain <textarea>, so individual words/phrases can be marked
   bold or heading instead of the whole block sharing one weight. */
#klook-form-notes {
    border: 1px solid var(--al);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-y: auto;
    max-height: 300px;
}
#klook-form-notes:empty:before {
    content: attr(placeholder);
    color: var(--sub);
}
/* Heading is applied to an arbitrary run of selected text (same as bold),
   not a whole block — inline display so it doesn't force a line break when
   it's only part of a paragraph. */
#klook-form-notes h4 { display: inline; font-size: 16px; font-weight: 800; margin: 0; }
.klook-notes-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.klook-notes-toolbar button {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.klook-notes-toolbar button:active { background: var(--al); }

/* Tile needs relative positioning for the delete button */
.reel-tile {
    position: relative;
}
/* Reels filter chips row */
.reels-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.reels-chips::-webkit-scrollbar { display: none; }
.reel-tile {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--elev-2);
    transition: border-color var(--transition), box-shadow 0.22s ease, transform 0.22s ease;
}
.reel-tile:active { transform: translateY(1px) scale(0.99); box-shadow: var(--elev-1); }
/* Portrait preview area (9:16) */
.reel-tile-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.reel-tile-preview .reel-iframe,
.reel-tile-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.reel-thumb-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: 12px;
    /* Without this, Android Chrome's OWN native long-press image-drag
       preview fires on this <img> alongside our custom SortableJS drag —
       its enlarged floating copy of the thumbnail is a separate browser
       gesture entirely, not something SortableJS's fallback clone (already
       correctly sized via .sortable-fallback below) has any control over.
       That's what kept showing an oversized preview even after the
       fallback clone itself was fixed to stay at 140px. */
    -webkit-user-drag: none;
    user-select: none;
    /* -webkit-user-drag:none only blocks the HTML5 mouse-drag ghost — the
       oversized preview kept appearing anyway because Android/iOS's native
       long-press image callout/preview is a SEPARATE touch-hold gesture
       path, suppressed by this property instead. */
    -webkit-touch-callout: none;
}
.reel-platform-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 4;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 3px 7px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
/* "Pinned to N pins" badge — top-right of a Saved Pins tile that represents
   one reel attached to multiple pins. */
.reel-pin-count {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 6px 12px 6px 10px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.12s ease;
}
.reel-pin-count:hover { background: rgba(0,0,0,0.78); }
.reel-pin-count:active { transform: scale(0.92); }
.reel-pin-count i { font-size: 15px; color: #EA4335 !important; }
/* Attached-pins popup list */
.reel-pin-list-empty { padding: 12px 14px; font-size: 13px; color: var(--sub); }
.reel-tile-no-thumb .reel-platform-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.reels-section-count-inline {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 8px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    margin-left: 4px;
}
.reel-ig-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 7px;
}
/* Floating delete on the tile */
.reel-tile-del {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-tile-del:active { background: #ef4444; }
.reel-tile-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reel-tile-note {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Manual add-reel toggle button */
.add-reel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg);
    border: 1.5px dashed var(--al);
    border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.add-reel-toggle:hover { border-color: var(--am); color: var(--am); }
.add-reel-toggle:active { background: var(--am); color: var(--white); }

/* Expanded add-reel form */
.add-reel-form {
    display: none;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--al);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.add-reel-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--al);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    outline: none;
}
.add-reel-input:focus { border-color: var(--am); }
.add-reel-folder-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--al);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    outline: none;
}
.add-reel-submit {
    align-self: center;
    padding: 10px 28px;
    background: #f1f5f9;
    color: #1e293b;
    border: none;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.add-reel-submit:active { background: var(--icon); }

/* Popup notes toggle button + panel */
.popup-notes-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--sub);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}
.popup-notes-btn.active {
    background: var(--am);
    color: var(--white);
    border-color: var(--am);
    box-shadow: 0 1px 3px rgba(59,130,246,0.2);
}
/* Wraps header + notes panel so the panel can anchor to "100% of this wrap"
   (i.e. exactly the header's bottom edge) regardless of the header's real height. */
.reel-titlebar-wrap {
    position: relative;
    z-index: 5;
}
.popup-notes-panel {
    /* Slides down from the header's bottom edge, overlaying the reel body below
       it — the reel never moves. Collapsed by default (max-height:0); opening
       adds .notes-open which animates it open like a dropdown. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 6;
    background: var(--bg);
    border-bottom: 1px solid var(--al);
    box-shadow: 0 10px 18px rgba(0,0,0,0.16);
    padding: 0 12px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: height 0.24s ease, opacity 0.18s ease;
}
.popup-notes-panel.notes-open {
    /* A slight 12px gap between the header and the photo (not fully flush).
       A flex column with the photo/meta chips locked to their natural size
       (flex-shrink:0) and the notes card set to flex:1 + its own overflow-y
       means the photo and meta always stay fully visible and ONLY the notes
       card scrolls for long content — no outer scroll competing with an
       inner one. A fixed height (not max-height) so the panel always covers
       the whole card by default (header + reel embed + nav dots) even when
       there's only a little content — otherwise it shrank to fit and the
       reel-nav bar below the embed peeked out under it. */
    display: flex;
    flex-direction: column;
    height: min(90vh, 700px);
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    /* Bottom padding closes off the notes card so it doesn't bleed into the
       panel's very edge — flex:1 previously let it stretch flush to the
       bottom with nothing but 8px separating it from the panel's own edge. */
    padding: 12px 12px 16px;
}
.popup-notes-panel.notes-open > img,
.popup-notes-panel.notes-open > .klook-meta-row {
    flex-shrink: 0;
}
.popup-notes-panel.notes-open .klook-notes-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.popup-notes-panel a {
    overflow-wrap: break-word;
    word-break: break-all;
}

.reel-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--al), 0 2px 8px rgba(0,0,0,0.06);
}

/* Grid layout (not absolute positioning) — every control stays in normal flow
   so nothing is ever clipped or click-blocked. Outer columns are both 1fr so
   they're always equal width regardless of what they contain — that's what
   keeps the centre (name) column truly centred, even when the delete button
   and notes pill have very different widths (or one side is empty). */
.reel-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--al);
    min-height: 48px;
    position: relative;
    gap: 10px;
}
.reel-header .map-back-btn { grid-column: 1; justify-self: start; }
.reel-header .reel-name { grid-column: 2; }
.reel-header .reel-popup-notes-pill { grid-column: 3; justify-self: end; margin-left: 0; }

/* Top tab bar — placed below header and above embed (kept for non-map contexts) */
.reel-tabs-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--white);
    border-bottom: 1.5px solid var(--al);
}

/* Clips the iframe — flex:1 takes all space minus the overlay bar */
.reel-iframe-clip {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* iOS Instagram loading placeholder + multi-slide carousel (see
   _loadIgSlides in app.js) — sized to fill whichever container it's in
   (.reel-iframe-clip for map cards, .reel-popup-body for the popup),
   same as the .reel-iframe rule right below. */
.ig-slides-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.reel-loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: ig-spin 0.8s linear infinite;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.ig-carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ig-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    object-fit: contain;
    background: #000;
}
.ig-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}
.ig-carousel-dots .reel-dot {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.5);
}
.ig-carousel-dots .reel-dot.active {
    background: #fff;
    width: 7px;
    height: 7px;
}
/* Left/right slide navigation, layered above the video/image but below the
   dots — separate gesture zone from the outer reel-to-reel swipe/arrows
   (those move between different saved posts; these move between slides of
   the same carousel post). */
.ig-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}
.ig-carousel-arrow:active { transform: translateY(-50%) scale(0.9); }
.ig-carousel-prev { left: 8px; }
.ig-carousel-next { right: 8px; }
.reel-iframe-clip .reel-iframe,
.reel-iframe-clip .reel-iframe-insta {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: unset !important;
    border: none;
}

/* Solid bar — always present, covers like/comment row, shows tab selector */
.reel-bottom-overlay {
    flex-shrink: 0;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--white);
    border-top: 1px solid var(--al);
}

/* Info window meta links (rating, phone, website) */
.iw-meta-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0 10px;
    overflow: hidden;
}
.iw-meta-link {
    font-size: 12px;
    color: var(--blue, #2C4A6E);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: block;
    line-height: 1.4;
    width: 100%;
    font-family: inherit;
}
.iw-meta-link:active { opacity: 0.7; }
.iw-website-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}
.iw-meta-muted {
    font-size: 12px;
    color: var(--sub);
}
.reel-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Back button on map cards (reel card + plain info window) — matches the
   standard tab-header back button (.sheet-close-btn) for consistency. */
.map-back-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.map-back-btn i { font-size: 18px; color: var(--icon); }
.map-back-btn:active { background: var(--al); color: var(--text); }
.iw-titlerow {
    display: grid;
    /* .map-back-btn is 38px — matching the outer columns to that (instead of
       the old 26px) stops the button overflowing its column and eating into
       the gap meant to separate it from the title. */
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 14px;
    min-height: 38px;
    margin-bottom: 4px;
}
.iw-titlerow .map-back-btn { grid-column: 1; }
.iw-titlerow .info-window-title {
    grid-column: 2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iw-titlerow .reel-popup-notes-pill { grid-column: 3; }
.reel-country {
    font-size: 12px;
    color: var(--sub);
}

.reel-body {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #000;
}

.reel-embed {
    flex: 1;
    min-height: 340px;
    background: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
}

.reel-iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: none;
    display: block;
}

.reel-open-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 120px;
    color: var(--white);
    background: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 20px;
}
/* iOS: IG embeds can't play — show a prominent open-in-app button */
.reel-ig-ios-btn {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    text-decoration: none !important;
    border-radius: inherit !important;
    height: 100% !important;
    min-height: 120px !important;
}
.reel-ig-ios-btn i { font-size: 28px !important; }
/* Scaled down for the small grid-tile preview context (vs. the full-size
   popup player where the base rule's dimensions apply). */
.reel-tile-preview .reel-ig-ios-btn {
    min-height: 0 !important;
    gap: 6px !important;
    font-size: 11px !important;
    padding: 8px;
    text-align: center;
}
.reel-tile-preview .reel-ig-ios-btn i { font-size: 20px !important; }
/* iOS Instagram reels: sits over a src-less iframe (see buildReelEmbed) so
   the tap never touches the cross-origin frame — that's what freezes on
   WebKit — and instead launches the reel externally. */
.client-touch-shield {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}
.reel-ig-fallback {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    z-index: 5;
    border-radius: 0;
}

/* Numbered tab switcher — right side */
.reel-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    background: var(--bg);
    border-left: 1px solid var(--al);
    min-width: 36px;
}

.reel-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--al);
    background: var(--white);
    color: var(--sub);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.reel-num.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--white);
}
.reel-num:active { transform: scale(0.9); }

/* ══════════════════════════════════════════════════════════════════
   V2 BOTTOM TABS — 3 tabs
   ══════════════════════════════════════════════════════════════════ */
/* Already styled by .float-tab — just ensure 3 fit */
body.v2 #bottom-tabs {
    gap: 8px;
}
body.v2 .float-tab {
    font-size: 13px;
    padding: 10px 14px;
    flex: 1;
    justify-content: center;
}
body.v2 .float-tab i {
    font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════════
   V2 ICON BUTTON — ensure all 4 buttons are visually identical
   ══════════════════════════════════════════════════════════════════ */
body.v2 .top-left .icon-btn,
body.v2 .top-right .icon-btn {
    color: var(--icon) !important;
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--elev-3) !important;
}
body.v2 .top-left .icon-btn.active,
body.v2 .top-right .icon-btn.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: #FFFFFF !important;
    box-shadow: var(--accent-shadow) !important;
}
body.v2 .top-left .icon-btn.signed-in,
body.v2 .top-right .icon-btn.signed-in {
    background: color-mix(in srgb, var(--am) 10%, var(--white)) !important;
    border-color: var(--am) !important;
    color: var(--am) !important;
}

/* Dark icons on sheet buttons — force override any inherited white */
body.v2 .sheet-close-btn,
body.v2 .sheet-action-btn,
body.v2 #itinerary-add-btn {
    color: var(--icon) !important;
    background: var(--bg) !important;
    border: 1px solid var(--al) !important;
}
body.v2 .sheet-close-btn i,
body.v2 .sheet-action-btn i,
body.v2 #itinerary-add-btn i {
    color: var(--icon) !important;
}
/* Global: all Phosphor icons in v2 default to dark text unless a parent overrides */
body.v2 i[class*="ph-"] {
    color: var(--icon);
}
body.v2 .icon-btn i {
    color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 MAP POPUP REEL OVERRIDES — InfoWindow summer palette & sizing
   ══════════════════════════════════════════════════════════════════ */
body.v2 .gm-style .gm-style-iw-c {
    background: var(--white) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    border-radius: var(--radius) !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.v2 .gm-style .gm-style-iw-d {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}
body.v2 .gm-style .gm-style-iw-d::-webkit-scrollbar { display: none !important; }

/* "You are here" is a one-line label, but .gm-style-iw-d forces a fixed 290px
   so the rich reel popups have room — which stretched this into a full-width
   bar. Shrink-wrap just this one popup. :has() is the only way to reach the
   Google-generated wrapper from its child; where it's unsupported this simply
   doesn't apply and the label stays as it is today. */
body.v2 .gm-style .gm-style-iw-d:has(.map-here-pill),
.gm-style .gm-style-iw-d:has(.map-here-pill) {
    width: auto !important;
    max-width: none !important;
}
body.v2 .gm-style .gm-style-iw-c:has(.map-here-pill) { min-width: 0 !important; }
.map-here-pill {
    padding: 7px 14px;
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
}

body.v2 .gm-style .gm-style-iw-tc::after,
body.v2 .gm-style .gm-style-iw-t::after {
    background: var(--white) !important;
    border-color: var(--al) !important;
}

/* Place discovery popup — lock container + content to the same width so there's no right gap */
body.v2 .gm-style .gm-style-iw-c:has(.info-window),
body.v2 .gm-style .gm-style-iw-d:has(.info-window) {
    width: min(340px, calc(100vw - 32px)) !important;
    max-width: 340px !important;
    min-width: 0 !important;
}

/* Reel card popup — lock container to a wider width to fit screens and prevent layout restrictions */
body.v2 .gm-style .gm-style-iw-c:has(.reel-card),
body.v2 .gm-style .gm-style-iw-d:has(.reel-card) {
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    min-width: 0 !important;
}
body.v2 .info-window {
    width: min(340px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    padding: 14px !important;
}
body.v2 .btn-save-map {
    background: var(--am) !important;
    color: var(--white) !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2) !important;
    width: 100% !important;
    border-radius: 8px !important;
}

/* Make sure the reel card inside the map popup doesn't have double border/shadow */
body.v2 .gm-style-iw-c .reel-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* Hide Google's built-in close button — eliminates the right-side gap it reserves */
body.v2 .gm-style-iw-tc,
body.v2 .gm-style-iw-chr {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
}
body.v2 .gm-style-iw-c .reel-card {
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Header overlaps Instagram's own header */
body.v2 .gm-style-iw-c .reel-header {
    position: relative !important;
    z-index: 3 !important;
    background: var(--white) !important;
}
body.v2 .gm-style-iw-c .reel-embed {
    display: block !important;
    position: relative !important;
    height: calc(100svh - 210px) !important;
    min-height: 250px !important;
    max-height: 480px !important;
    overflow: hidden !important;
}
body.v2 .gm-style-iw-c .reel-iframe-clip {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}
/* Hide any stray links/text injected by embed scripts (Instagram footer etc) */
body.v2 .gm-style-iw-c a[style*="text-align"],
body.v2 .gm-style-iw-c .reel-iframe-clip ~ *,
body.v2 .gm-style-iw-c .reel-body > :not(.reel-embed),
body.v2 .gm-style-iw-c .reel-embed > :not(.reel-iframe-clip) {
    display: none !important;
}
/* Nav bar sits below the embed, overlaps Instagram footer */
body.v2 .gm-style-iw-c .reel-nav-inline {
    border-radius: 0 0 14px 14px !important;
    position: relative !important;
    z-index: 4 !important;
    background: var(--white) !important;
    border-top: 1px solid var(--al) !important;
    margin-top: -1px !important;
    min-height: 58px !important;
}
body.v2 .gm-style-iw-c .reel-iframe-clip iframe {
    width: 100% !important;
    min-height: unset !important;
}
body.v2 .gm-style-iw-c .reel-bottom-overlay {
    display: none !important;
}
body.v2 .gm-style-iw-c .reel-iframe {
    display: block !important;
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    margin-top: 0 !important;   /* show Instagram's own header (avatar + username) */
    border: none !important;
}

/* Horizontal top-right header tabs styling */
body.v2 .header-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 BRAND LOGO — Top center elegant branding
   ══════════════════════════════════════════════════════════════════ */
body.v2 .brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}
body.v2 .brand-logo .logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
}
body.v2 .brand-logo .logo-dot-blue {
    color: var(--blue);
}

/* All-days date-header bubble list */
.alldays-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 24px;
}
/* Dark card style — mirrors the trip date-block header (centred wording, no route btn) */
.alldays-date-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 14px 84px;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color var(--transition);
    box-shadow: 0 1px 4px var(--shadow);
}
.alldays-date-header:active { opacity: 0.82; }
/* Day name pinned left inside All Days header */
.alldays-date-header .date-day {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
}
/* Count + chevron pinned right */
.alldays-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
.alldays-right .ph-caret-right {
    color: var(--ad);
    font-size: 14px;
}
/* Matches the trip folder pill's plain-text count style (.trip-pill-meta)
   instead of its own filled blue badge, so the two "N pins" indicators read
   consistently across the folder list and the itinerary's All Days list. */
.alldays-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Route exit floating button */
/* Route control bar — one centered row: [play/pause][prev] · Exit Route · [next][clear] */
.route-control-bar {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: space-between;
    /* Narrower than full-width so the outer buttons sit a bit in from the
       screen edges and closer to the centred Exit Route button. */
    width: min(410px, calc(100vw - 60px));
}
.route-control-bar .rc-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rc-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--al);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    color: var(--text);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rc-btn:active { transform: scale(0.92); }
.rc-btn#rc-playpause { background: var(--am); border-color: var(--am); color: #fff; }
.rc-btn--disabled { opacity: 0.4; pointer-events: none; }
.route-exit-btn {
    position: static;
    transform: none;
    z-index: 500;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 24px;
    padding: 10px 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* Route toggle button in date block header — outline blue, floats right */
.route-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border: 1.5px solid var(--am);
    border-radius: 50%;
    color: var(--am);
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.route-toggle-btn i {
    color: var(--am) !important;
    font-size: 17px;
}
/* Draws the eye to the icon once when the day's timeline first renders — a
   bigger, more energetic shake than before. Delayed to start AFTER the first
   timeline pill's swipe-hint wiggle (ends at 2.4s) so the hints read as a
   sequence. Only on a FRESH render (route-toggle-btn--hint) — NOT on preserved
   re-renders like the edit-mode toggle or the 8s collab sync, where replaying
   the wiggle/ripple looked like the route button firing on its own. */
.route-toggle-btn--hint i {
    animation: route-btn-hint 1.3s ease-in-out 2.4s 1;
}
.route-toggle-btn:active { opacity: 0.7; }

@keyframes route-btn-hint {
    0%, 100% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(-22deg) scale(1.18); }
    30% { transform: rotate(18deg) scale(1.18); }
    45% { transform: rotate(-16deg) scale(1.14); }
    60% { transform: rotate(12deg) scale(1.1); }
    75% { transform: rotate(-8deg) scale(1.06); }
    90% { transform: rotate(4deg) scale(1.02); }
}

/* Small "finger tap" ripple alongside the icon wiggle above — an expanding
   ring that fades out, timed to the same delay/duration so the two read as
   one combined hint ("someone just tapped this"). */
.route-toggle-btn--hint::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--am);
    opacity: 0;
    pointer-events: none;
    animation: route-btn-tap-ripple 1.3s ease-out 1.1s 1;
}
@keyframes route-btn-tap-ripple {
    0% { transform: scale(0.8); opacity: 0; }
    12% { transform: scale(0.95); opacity: 0.9; }
    55% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ── Reel tile thumbnail (2-col grid, tap-to-popup) ──────────────────────── */
.reel-tile-thumb-bg {
    position: absolute;
    inset: 0;
    background: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-tile-platform-icon {
    font-size: 32px;
    color: rgba(255,255,255,0.25);
}
.reel-tile-thumb-note {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-align: center;
    padding: 0 10px;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.reel-tile-play-btn { display: none !important; }

/* Platform badge in reel tile thumbnail */
.reel-tile-platform-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 20px;
    color: var(--white);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    text-transform: uppercase;
}
/* Transparent overlay captures the tap so the iframe underneath shows but doesn't steal the click */
.reel-tile-tap-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* ── Oversized Iframe Mask — tile previews ────────────────────────
   Cross-origin iframes prevent CSS injection into IG's .EmbedHeader
   or .Feedback. Instead we render the iframe taller than the 9:16
   container so IG's flexbox expands the video to fill the space,
   then overflow:hidden on .reel-tile-preview clips the chrome.

   Offset math (URLs forced to /embed/ — no /captioned/ — for a
   predictable ~44px footer):
     IG embed header  ≈ 58px  →  top: -58px  (shifted above view)
     IG footer bar    ≈ 44px  →  pushed below container by the
                                 extra height, clipped by overflow
     iframe height = 100% + 58 + 44 = container + 102px
     min-height: 400px guarantees IG's layout has enough room to
     expand the video even on very small tile widths.
   Width 140% + left -20% centres the video while clipping IG's
   side-swipe arrows on multi-image carousel posts.
   pointer-events: none prevents scroll-hijack inside the grid.  */
.reel-tile-preview iframe,
.reel-tile-preview .reel-iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    pointer-events: none;
}
.reel-tile-preview .reel-iframe-insta {
    top: -58px !important;
    bottom: auto !important;
    height: calc(100% + 160px) !important;
    min-height: 400px !important;
    width: 140% !important;
    left: -20% !important;
    right: auto !important;
}
/* ── Reel fullscreen popup overlay ──────────────────────────────────────── */
.reel-popup-overlay {
    position: fixed;
    inset: 0;
    /* Above the reel carousel (9550) and location card so tapping a preview tile
       opens the player ON TOP of the card + tiles rather than behind them. */
    z-index: 9560;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    pointer-events: none;
}
/* Blur on a pseudo-element avoids the Chromium bug where backdrop-filter
   on an ancestor intercepts pointer events inside iframes (Android Chrome). */
.reel-popup-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    pointer-events: none;
    animation: fadeIn var(--dur-fast) ease;
}
.reel-popup-overlay .reel-popup-card,
.reel-popup-overlay .reel-nav-inline {
    pointer-events: auto;
}
.reel-popup-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    box-shadow: 0 0 0 1px var(--al), var(--elev-4);
    position: relative;
    /* The player used to materialise with no motion — now it scales up. */
    animation: popIn var(--dur-base) var(--ease-out);
}
/* Shared "card materialises" curve for centred modals/players. */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Outer columns are both 1fr — always equal width regardless of what they
   contain, which keeps the note/title truly centred even though the delete
   button and the platform badge ("Instagram" vs "TT") are very different widths. */
.reel-popup-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 14px;
    background: var(--white);
    border-bottom: 1px solid var(--al);
    min-height: 48px;
    gap: 8px;
    position: relative;
}
.reel-popup-header .reel-popup-back { grid-column: 1; justify-self: start; }
.reel-popup-header .reel-popup-note { grid-column: 2; }
.reel-popup-header .feed-platform,
.reel-popup-header .reel-pin-inline-btn,
.reel-popup-header .reel-popup-attach-pin-btn { grid-column: 3; justify-self: end; }
.reel-popup-attach-pin-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
body.v2 .reel-popup-attach-pin-btn i { font-size: 18px; color: #EA4335; }
.reel-popup-attach-pin-btn:active { background: var(--al); }
.reel-popup-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    min-width: 0;
    text-align: center;
}
.reel-popup-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition);
}
.reel-popup-close i { font-size: 16px; color: var(--text); }
/* Back button next to the reel name — matches the standard tab-header back
   button (.sheet-close-btn) for consistency across the app. */
.reel-popup-back {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.reel-popup-back i { font-size: 18px; color: var(--icon); }
.reel-popup-back:active { background: var(--al); color: var(--text); }
.reel-popup-body {
    flex: 1;
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    max-height: min(calc(100svh - 210px), 480px);
    overflow: hidden;
    background: #000;
}
/* iOS Instagram extraction/playback failure — shows whatever real preview
   frame we have (see _igFallbackFrameHtml in app.js) instead of a bare
   black box, with .reel-open-app-btn (below) as a small non-blocking
   overlay rather than the only thing on screen. */
.reel-ig-fallback-frame {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: center;
}
.reel-open-app-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 13px 28px;
    border-radius: 24px;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Keep the label on ONE line — the pill grows wider instead of wrapping to
       two lines (height stays the same). */
    white-space: nowrap;
    max-width: calc(100% - 24px);
}
.reel-open-app-btn span { white-space: nowrap; }
/* Grid-tile variants. The popup's wide text pill would swamp a ~150px tile, so
   on a tile the "open in app" control is just the platform's app icon, pinned
   bottom-right opposite the platform badge. Added by _addTileFallbackOverlays
   to tiles whose preview could not be produced. */
.reel-tile-preview .reel-open-app-btn--tile {
    left: auto;
    transform: none;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    border-radius: 9px;
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    justify-content: center;
}
/* Label is for the popup's pill; the tile shows the glyph alone. */
.reel-tile-preview .reel-open-app-btn--tile span { display: none; }
.reel-tile-preview .reel-open-app-btn--tile i { font-size: 19px; }
/* Non-Instagram platforms have no brand gradient here — neutral dark chip. */
.reel-tile-preview .reel-open-app-btn--tile.reel-open-app-btn--plain {
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,255,255,0.22);
}
.reel-tile-preview .reel-info-btn {
    top: 8px; left: 8px;
    width: 30px; height: 30px;
    background: rgba(0,0,0,0.55);
}
.reel-tile-preview .reel-info-btn i { font-size: 17px; }
/* IG glyph forced white (beats the global body.v2 Phosphor colour reset) and
   sized up to match the larger pill. */
.reel-open-app-btn i { color: #fff !important; font-size: 19px; }
/* "i" info button, top-left of the fallback reel card. */
.reel-info-btn {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 11;
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-info-btn i { color: #fff !important; font-size: 19px; }
/* Explainer popup (why the reel opens in Instagram). */
.reel-info-popup {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); padding: 24px;
}
.reel-info-popup-inner {
    background: #fff; border-radius: 20px; padding: 26px 24px 20px;
    max-width: 330px; width: 100%; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.32);
}
/* The icon reads as a badge rather than a loose glyph, and the title carries
   the spacing under it — the icon's own margin used to do both jobs and left
   the heading crowded against the body copy. */
.reel-info-popup-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: color-mix(in srgb, var(--am) 12%, transparent);
    font-size: 24px; color: var(--am) !important; margin-bottom: 0;
}
.reel-info-popup-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; margin: 14px 0 8px; color: #202124; }
.reel-info-popup-text { font-size: 13.5px; line-height: 1.6; color: #5F6368; }
/* Reassurance line — quieter than the explanation above it. */
.reel-info-popup-text--sub { margin-top: 10px; font-size: 12.5px; color: #80868B; }
.reel-info-popup-ok {
    margin-top: 22px; width: 100%; padding: 13px; border: none; border-radius: 14px;
    background: var(--am); color: #fff; font-family: 'Outfit', sans-serif;
    font-weight: 700; font-size: 14.5px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-info-popup-ok:active { filter: brightness(0.94); }
/* "Photos" — a plain section heading, like NOTES above it. */
.pdc-exp-title--row { display: flex; align-items: center; justify-content: flex-start; gap: 7px; }
/* "Save pin to" destination sheet (Saved / an existing list / a new one). */
.pin-dest-row { gap: 12px; }
.pin-dest-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--al);
    color: var(--am); font-size: 18px;
}
.pin-dest-icon--new { background: color-mix(in srgb, var(--am) 12%, transparent); border-color: transparent; }
.pin-dest-row--new .follow-list-meta b { color: var(--am); }
body.v2.dark .reel-info-popup-inner { background: #2D2F33; }
body.v2.dark .reel-info-popup-title { color: #E8EAED; }
body.v2.dark .reel-info-popup-text { color: #9AA0A6; }
body.v2.dark .reel-info-popup-text--sub { color: #7F868C; }
.reel-popup-body .reel-iframe-clip {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}
.reel-popup-body iframe,
.reel-popup-body video,
.reel-popup-body blockquote { width: 100% !important; height: 100% !important; object-fit: contain; background: #000; }
/* Popup view: iframe fixed at 600px, header now shown (margin-top:0 exposes
   Instagram's avatar + username bar). Overflow:hidden on .reel-iframe-clip +
   the nav bar overlay clip the IG footer at the bottom. */
.reel-popup-body iframe.reel-iframe-insta {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    max-height: none !important;
    margin-top: 0 !important;
}
/* Nav bar overlaps the bottom of the popup embed — covers any IG footer
   chrome that bleeds through, matching the map popup's z-index overlay. */
.reel-popup-card > .reel-nav-inline {
    position: relative;
    z-index: 4;
    background: var(--white);
    border-top: 1px solid var(--al);
    border-radius: 0 0 16px 16px;
    margin-top: -1px;
    padding: 16px 16px;
    min-height: 58px;
}

/* ── Frameless feed reel viewer (v2) ──────────────────────────────────────
   The back / action buttons float freely at the screen corners, the reel is
   its own rounded pill panel, and the reel selector is a separate island pill
   below it — all three are independent siblings inside the overlay, which
   stacks them as a centred column with the floating buttons pinned on top. */
/* The overlay reserves a top zone (floating buttons) and a bottom zone (reel
   selector) via padding, and centres the content pill in what's left — so the
   content never runs under the buttons or the selector. The buttons and the
   selector are absolutely-positioned overlays that sit inside those zones. */
.reel-popup-overlay--v2 {
    padding: 92px 12px 116px;
    box-sizing: border-box;
    gap: 0;
}
/* Content pill: rounded panel holding just the reel — fills the space left
   between the reserved top/bottom zones. */
.reel-popup-card--v2 {
    background: #000;
    border-radius: 20px;
    max-height: 100%;
}
.reel-popup-card--v2 .reel-popup-body {
    max-height: 100%;
    border-radius: 20px;
}
/* Back (top-left) + action (top-right) float at the screen's top corners,
   over the blurred backdrop — like the map's logo / search buttons. Larger
   solid white circles for contrast + easier tapping. */
.reel-popup-float-btn {
    position: absolute;
    top: 18px;
    z-index: 7;
    pointer-events: auto;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    /* Match the centre title pill: translucent black + blur, no white circle. */
    background: rgba(0,0,0,0.5) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: none !important;
    box-shadow: none !important;
}
.reel-popup-float-btn i { font-size: 22px !important; }
/* White icons on both; the reel (add-more) glyph stays red. */
.reel-popup-back.reel-popup-float-btn i { color: #fff !important; }
.reel-popup-attach-pin-btn.reel-popup-float-btn i { color: #EA4335 !important; }
.reel-popup-back.reel-popup-float-btn { left: 16px; }
.reel-popup-attach-pin-btn.reel-popup-float-btn { right: 16px; }
/* Detach button sits just below the add-more button on the right edge. */
.pdc-reel-opt--danger span { color: #EA4335; }
.pdc-reel-opt--danger i { color: #EA4335; }
/* Folder-name pill floats top-centre, between the two buttons. */
.reel-popup-note--float {
    position: absolute;
    top: 27px; left: 50%; transform: translateX(-50%);
    z-index: 6;
    max-width: 62%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-line-clamp: 2;
}
/* Reel selector — its own island pill, lower (near the bottom), enlarged. */
.reel-popup-overlay--v2 .reel-nav-inline {
    position: absolute;
    bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 6;
    pointer-events: auto;
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    width: auto;
    min-width: 260px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    background: rgba(0,0,0,0.58) !important;
    border: none !important;
    border-top: none !important;
    border-radius: 28px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.reel-popup-overlay--v2 .reel-nav-inline .reel-arrow {
    width: 40px; height: 40px;
    font-size: 24px;
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
}
/* Counter fills the middle and centres its own text, with the arrows pinned
   at the pill's two ends — so "N / M" sits dead-centre even when the next
   arrow is hidden on the last reel. Dots are dropped here (redundant with the
   counter + arrows, and they pushed the counter off-centre). */
.reel-popup-overlay--v2 .reel-nav-inline .reel-dots { display: none; }
.reel-popup-overlay--v2 .reel-nav-inline .reel-counter {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    color: #fff;
}

/* ── Reel popup: Pin button in header top-left ─────────────────────────────── */
.reel-pin-inline-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--am) 10%, white);
    border: 1px solid var(--am);
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--am);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: all var(--transition);
}
.reel-pin-inline-btn:active { background: var(--am); color: #fff; }

/* Notes pill button in reel popup header */
.reel-popup-notes-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    font-size: 18px;
    color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: all var(--transition);
}
.reel-popup-notes-pill.active {
    background: var(--am);
    color: var(--white);
    border-color: var(--am);
}

/* ── Reels edit mode ─────────────────────────────────────────────────────────── */
/* Multi-select tick on a reel tile. It used to be a 36px ring wrapping a
   ph-check-CIRCLE glyph — a circle inside a circle — and the tick showed even
   when the tile wasn't selected, which read as "already chosen". Now it's a
   smaller empty ring that only fills in (accent + white tick) once selected,
   which is the standard multi-select affordance. */
.reel-select-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0,0,0,0.32);
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.reel-select-indicator i {
    font-size: 15px;
    color: #fff !important;
    opacity: 0;
    transition: opacity 0.12s;
}
.reel-tile { position: relative; }
.reel-tile.edit-mode .reel-select-indicator { display: flex; }
.reel-select-indicator:active { transform: scale(0.88); }
.reel-select-indicator.selected {
    background: var(--am);
    border-color: #fff;
}
.reel-select-indicator.selected i { opacity: 1; }
.reel-tile.reel-selected .reel-tile-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(44,74,110,0.25);
    border-radius: inherit;
    pointer-events: none;
}

/* Edit mode action bar */
.reels-edit-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.edit-bar-float-area {
    display: none;
}
.edit-bar-count {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 24px;
    padding: 8px 22px;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
}
.edit-bar-buttons {
    background: var(--white);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.edit-bar-btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.edit-bar-btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.edit-bar-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.edit-bar-btn i { font-size: 16px; }
/* Push scrollable content above the edit bar when active */
body.saved-edit-active .view-page {
    padding-bottom: 90px;
}
.edit-move-btn { background: #e0edff; color: #1d4ed8; border-color: var(--am); }
.edit-move-btn i { color: #1d4ed8; }
body.v2.dark .edit-move-btn { background: #1e3a5f; color: #93c5fd; border-color: var(--am); }
body.v2.dark .edit-move-btn i { color: #93c5fd; }
.edit-pin-btn { background: var(--bg); }
.edit-delete-btn { background: var(--white); color: #ef4444; border-color: color-mix(in srgb, #ef4444 30%, var(--white)); }
.edit-delete-btn i { color: #ef4444; }
/* Archive (amber) + Restore (green) bulk actions, sitting between Copy-to and
   Delete. Neutral-warm for archive; positive-green for restore. */
.edit-archive-btn { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.edit-archive-btn i { color: #b45309; }
body.v2.dark .edit-archive-btn { background: #3a2a12; color: #fbbf24; border-color: #78551b; }
body.v2.dark .edit-archive-btn i { color: #fbbf24; }
.edit-restore-btn { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.edit-restore-btn i { color: #047857; }
body.v2.dark .edit-restore-btn { background: #0f3327; color: #6ee7b7; border-color: #1c6b4e; }
body.v2.dark .edit-restore-btn i { color: #6ee7b7; }

/* Per-state bulk-select controls — a compact row at the top of an expanded
   state group ("Select" / "Select all (N)"). Understated so the pins stay the
   focus, but clearly tappable. */
.state-select-row {
    display: flex;
    gap: 8px;
    padding: 2px 2px 8px;
}
.state-select-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border-soft);
    box-shadow: var(--elev-1);
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--sub); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.state-select-btn i { font-size: 14px; color: var(--am); }
.state-select-btn:active { transform: scale(0.97); }
/* While selecting, the "Select" button flips to "Cancel" — tint it red so the
   exit affordance reads clearly (replaces the removed bottom Cancel button). */
.state-select-btn.state-select-cancel { color: #ef4444; border-color: #fecaca; }
.state-select-btn.state-select-cancel i { color: #ef4444; }

/* ── Saved pins bulk-select — 3-dot menu button next to a country's title
   slides down a small panel with "select individually" / "select all"
   options ── */
.country-bulk-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-text-muted, #94a3b8);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    justify-self: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.country-bulk-arrow.open { color: var(--am); }
.country-bulk-panel {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
    transition: max-height 0.25s ease;
}
.country-bulk-panel.open {
    max-height: 120px;
    padding: 4px 4px 8px;
}
.country-bulk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--al);
    background: var(--white);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.country-bulk-item:active { background: var(--bg); }
.bulk-item-label { flex: 1; text-align: center; }
.country-bulk-item i { font-size: 17px; flex-shrink: 0; }
.bulk-icon-blue { color: #3b82f6; }
.bulk-icon-red { color: #ef4444; }
/* Invisible mirror of the real icon on the opposite side — without it the
   label's flex:1/text-align:center only centers within (button width minus
   icon width), which visibly skews the text off the button's true center. */
.bulk-icon-spacer { visibility: hidden; }

/* Selected-pin highlight while in bulk-select mode — a clearly visible fill,
   accent border, and a checkmark badge so it's obvious at a glance. Pencil
   button hidden and card reserves room on the right so it never overlaps
   the title text or the checkmark badge. */
.saved-card.saved-select-mode {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.saved-card.saved-select-mode .card-edit-btn { display: none !important; }
.saved-card.saved-selected {
    background: color-mix(in srgb, var(--am) 50%, var(--white));
    border-color: var(--am);
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--am);
}

/* ── Pins "Hold to edit" pill ────────────────────────────────────────────────── */
.pins-hold-tip {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    white-space: nowrap;
    letter-spacing: 0.01em;
    background: var(--bg);
    border: 1.5px solid var(--al);
    border-radius: 20px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Reel refresh overlay — transparent, activates after delay */
.reel-refresh-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}
.reel-refresh-overlay.active {
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════
   V2 REELS CAROUSEL — horizontal scroll rows grouped by folder
   ══════════════════════════════════════════════════════════════════ */
#page-reels.view-page {
    padding: 14px 6px;
    border-radius: 16px;
}
.reels-section {
    margin-bottom: 20px;
    border-radius: 14px;
    transition: background var(--transition), box-shadow var(--transition);
}
/* Expanded folder rendered as an OPEN folder: a coloured flap/header carrying
   the folder name + reel count (layout + X buttons on the right), with the
   reels sitting inside a same-colour tinted wrapper. --fc is the folder's own
   colour, set inline per folder. */
.reels-section--folder {
    position: relative;
    margin-top: 18px;
    border: none;
    border-radius: 16px;
    background: var(--fg, var(--fc));
    overflow: visible;
}
.reels-section--folder .reels-section-header {
    position: relative;
    z-index: 1;
    background: transparent;
    border-radius: 15px 15px 0 0;
    /* Roomier header so the centred title and the floating layout button aren't
       cramped against each other / the top edge. */
    padding: 20px 18px 14px;
    min-height: 52px;
    box-sizing: border-box;
    cursor: pointer;
}
/* Darker grabber bar centred at the top of the header — signals the whole
   coloured header is tappable (to close the folder). */
.reels-section--folder .reels-section-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.28);
}
.reels-section--folder .reels-section-header--folder:active { filter: brightness(0.94); }
/* Title (name + count) sits at the LEFT of the header, vertically centred; the
   layout toggle floats at the right edge. Centring it put the name directly
   under the grabber bar and left a dead gap on the left. */
.reels-section--folder .reels-section-header { justify-content: flex-start; }
.reels-section--folder .reels-section-header .reels-section-title {
    display: flex; align-items: center; gap: 8px;
    /* Stop short of the floating layout button rather than running under it. */
    padding-right: 44px;
    min-width: 0;
}
/* Shared reels folder header: always-expanded, shows only the count centred —
   no title, no collapse affordance. */
/* Reels collection view: the panel body doesn't scroll — the grid gets a
   max-height (set in JS to fill to the panel bottom) and scrolls internally.
   max-height (not a flex/definite height) so the aspect-ratio tiles size their
   own rows correctly instead of stretching/overlapping. */
.profile-body--reels { overflow: hidden !important; }
/* #profile-collection-items must be able to flex-grow inside the body. */
.profile-body--reels { display: flex; flex-direction: column; }

/* Empty coloured folder header (no title/layout/count) — just a coloured band. */
.reels-section--folder .shared-reels-header { cursor: default; min-height: 34px; }
.reels-section--folder .shared-reels-header:active { filter: none; }
.reels-section--folder .shared-reels-header::before { display: none; }
.reels-section--folder .reels-section-title {
    color: #fff;
    flex: none;
    justify-content: center;
    text-align: center;
}
/* Match the collapsed card's ⋮ menu button — dark translucent circle, white
   icon — instead of a white pill. */
.reels-section--folder .reels-section-layout-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
}
.reels-section--folder .reels-section-layout-btn:active { background: rgba(0, 0, 0, 0.4); }
.reels-section--folder .reels-section-layout-btn i { color: #fff !important; }
.reels-section--folder .reels-section-count-inline {
    color: #fff;
    background: rgba(255,255,255,0.25);
    border-color: transparent;
}
.reels-section--folder .reels-carousel { padding: 8px 14px 16px; }
.reels-section-dropover {
    background: rgba(26,115,232,0.08);
    outline: 2px dashed var(--am);
    outline-offset: -2px;
}
/* No touch-action override here on purpose — an earlier touch-action:none
   (for the old SortableJS setup) broke native horizontal scrolling of the
   carousel. The custom pointer-events drag (_initReelTileDrag in app.js)
   instead distinguishes a scroll from a drag via a long-press timer + a
   pre-drag movement threshold, and only blocks native scroll (via a
   passive:false touchmove preventDefault) once a drag is actually underway. */
.reel-tile { cursor: grab; }
/* Our own drag clone (built by _initReelTileDrag): a fixed-position, fixed
   140px-wide copy of the tile that follows the finger. Explicitly sized so it
   can never balloon to full width the way SortableJS's body-reparented
   fallback did. Iframe hidden in the clone (the tile's own black background
   shows instead) to avoid a cross-origin embed re-loading blank mid-drag. */
.reel-drag-clone {
    position: fixed;
    z-index: 100000;
    width: 140px;
    margin: 0;
    pointer-events: none;
    opacity: 0.92;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.reel-drag-clone iframe { display: none !important; }
/* The source tile stays in place (and reflows for live reordering) but dimmed
   while its clone is the thing being dragged. */
.reel-drag-source { opacity: 0.35; }
.reels-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 8px;
}
.reels-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
/* Short caption for the two computed (non-manual) buckets — "Saved" and
   "Saved Pins" — explaining what they mean, since unlike real trip folders
   their name alone doesn't make that obvious. Sits to the right of the
   title/count on the same line, not stacked below it. */
.reels-section-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.reels-section-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 7px;
}
.reels-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reels-carousel::-webkit-scrollbar { display: none; }
.reel-drag-finger {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 46px;
    /* body.v2 i[class*="ph-"] otherwise resets every Phosphor icon to
       var(--icon) (a dark gray) — needs to win here so the hint stays
       legible against dark/light thumbnails alike. */
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation: reel-drag-finger-move 2s ease-in-out 1;
}
/* Just an up-and-settle-back motion — dragging a tile UP into a folder card
   is the only gesture that actually does anything here, so a hint that also
   swiped down/left/right was demonstrating motions that don't mean
   anything. The remaining up leg travels further (-170% vs the old -125%)
   so it reads clearly as "lift this up", not just a small jiggle. */
@keyframes reel-drag-finger-move {
    0%   { opacity: 0;   transform: translate(-50%, -50%); }
    10%  { opacity: 1;   transform: translate(-50%, -50%); }
    55%  { opacity: 1;   transform: translate(-50%, -170%); }
    90%  { opacity: 1;   transform: translate(-50%, -50%); }
    100% { opacity: 0;   transform: translate(-50%, -50%); }
}
/* Dims the real tile while its ghost clone is being "dragged" above it, so
   it's clear which tile the hint belongs to. */
.reel-tile-drag-source > .reel-tile-preview:not(.reel-drag-ghost) {
    opacity: 0.45;
    transition: opacity 0.2s;
}
.reel-drag-ghost {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.16);
    pointer-events: none;
    z-index: 2;
    animation: reel-drag-tile-move 2s ease-in-out 1;
}
@keyframes reel-drag-tile-move {
    0%, 10%   { transform: translate(0, 0); }
    55%       { transform: translate(0, -46px); }
    90%, 100% { transform: translate(0, 0); }
}
.reels-carousel .reel-tile {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    scroll-snap-align: start;
}
.reels-carousel .reel-tile-portrait {
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
}
/* Grid layout: 2-column vertical grid (scrolls with the sheet) instead of a
   horizontal strip. */
.reels-carousel--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-x: hidden;
    /* Capped to ~3.5 rows (max-height set by _capReelsGrids after layout);
       taller lists scroll within the grid instead of the whole sheet. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reels-carousel--grid::-webkit-scrollbar { display: none; }
.reels-carousel--grid .reel-tile {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
.reels-layout-btn { flex: 0 0 auto !important; }

.reels-add-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px dashed var(--al);
    background: transparent;
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.reels-add-btn:hover { background: var(--bg); }
.reels-add-btn:active { transform: scale(0.98); }
.reels-add-row {
    display: flex;
    gap: 8px;
    padding: 8px 14px 20px;
}
.reels-add-row .reels-add-btn { flex: 1; }

/* Reels top toolbar */
.reels-toolbar {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
}
/* Pins tab: custom-list cards + sub-page "Add pins" toolbar.
   The New List / A–Z toolbar reuses the Itinerary tab's exact toolbar (base
   .reels-toolbar + .reels-toolbar-btn) — same button style, gap and padding
   against the panel — so the two tabs read identically. No overrides here. */
/* 14px top pad matches the Itinerary tab's .grouped-list padding-top so the
   toolbar isn't flush against the panel's top edge. */
.pins-toolbar-row { padding: 14px 14px 12px; }
/* Cards sit directly under the toolbar — kill the .trip-pill-list top pad so
   the gap to the first card matches the inter-card gap. */
.pins-list-cards { padding-top: 0; margin-bottom: 10px; }
/* Pin-list search — only on a drilled-in list sub-page (Saved / a custom list),
   not the top-level list-of-lists. */
body.v2 .pins-list-search-row { display: none; padding: 10px 14px 12px; }
body.v2.pins-in-list .pins-list-search-row { display: block; }
.pins-search-wrap {
    display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 14px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pins-search-wrap:focus-within { border-color: var(--am); box-shadow: var(--elev-2); }
.pins-search-wrap i { font-size: 16px; color: var(--sub); flex-shrink: 0; }
.pins-search-wrap .pins-search-input {
    flex: 1; border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    min-height: 0; height: auto; padding: 0; margin: 0;
}
.pins-search-wrap .pins-search-input::placeholder { color: var(--ad); }

/* Custom list: the "Add pins" action floats at the BOTTOM of the panel (over the
   list), instead of a toolbar row pinned above the country groups. */
/* In half-peek, the Pins list is a quick-glance strip — hide the floating
   "Add pins" bar and the search box so only the pins show; they return at full. */
body.v2.sheet-half .pins-add-floating-bar,
body.v2.sheet-half .pins-search-wrap { display: none !important; }

.pins-add-floating-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 68%, transparent);
    display: flex; justify-content: center;
    pointer-events: none;
}
.pins-add-floating-bar .pins-add-floating-btn {
    pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 480px; padding: 13px 18px; border-radius: 999px;
    background: var(--am); color: #fff; border: none; box-shadow: var(--accent-shadow);
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.pins-add-floating-bar .pins-add-floating-btn:active { transform: translateY(1px) scale(0.99); box-shadow: var(--elev-1); }
/* Pins list cards reuse .trip-star as a generic icon holder (bookmark / list
   glyph), NOT a favourite star — so keep those icons a neutral grey outline
   rather than the yellow used by real trip stars. */
.pins-list-cards .trip-star i { color: var(--sub) !important; }
/* Left icon colour by list type: system/fixed lists (All / Saved / Others) get
   a blue outline; custom/unique folders get green. */
.pins-list-cards .trip-star--sys i { color: #3B82F6 !important; }
.pins-list-cards .trip-star--custom i { color: #22C55E !important; }
/* In edit mode, fixed lists (Saved / Others) can't be selected — dim them so
   it's clear only custom lists are editable. */
.trip-pill--fixed { opacity: 0.5; }
/* Drag-to-reorder (edit mode) */
.trip-pill--dragging {
    box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
    opacity: 1 !important;
    transform: scale(1.02);
    transition: none !important;
}
.trip-pill-drag-placeholder {
    border: 2px dashed var(--am);
    border-radius: 12px;
    background: color-mix(in srgb, var(--am) 12%, var(--bg));
    margin: 0;
    box-sizing: border-box;
}
/* Left-edge grab handle — the drag/hold point, only shown in reorder (edit)
   mode. Absolutely positioned so it doesn't disturb the row's own layout;
   reorder mode adds left padding to make room. */
.list-drag-handle {
    display: none;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    align-items: center;
    justify-content: center;
    color: var(--ad);
    font-size: 20px;
    cursor: grab;
    touch-action: none; /* let the handle own the pointer gesture (no scroll) */
    z-index: 3;
}
.list-drag-handle:active { cursor: grabbing; }
body.list-reorder-active .list-drag-handle { display: flex; }
/* Make room for the handle in reorder mode (trip-pill = trips + pins cards). */
body.list-reorder-active .trip-pill { padding-left: 38px; }
/* Reels folder card: handle sits over the tab strip on the left. */
/* Reels handle sits OUTSIDE the card, in the left gutter, vertically centred.
   It's over the grey panel now, so it uses a dark-grey (not white) glyph. */
.list-drag-handle--reels {
    left: -30px; top: 50%; bottom: auto; transform: translateY(-50%);
    color: var(--sub);
}
/* In edit mode the reels cards shift slightly right (narrower + left margin, so
   they never run off-screen) to open a left gutter for the drag handle, which
   sits OUTSIDE the card at left-centre. */
body.list-reorder-active .reels-folder-card {
    padding-left: 0;
    width: calc(100% - 30px);
    margin-left: 30px;
}
/* Gentle iOS-style jiggle while editing (not the card being dragged). */
@keyframes reelsJiggle { 0%,100% { transform: rotate(-0.55deg); } 50% { transform: rotate(0.55deg); } }
@keyframes reelsJiggle2 { 0%,100% { transform: rotate(0.55deg); } 50% { transform: rotate(-0.55deg); } }
body.list-reorder-active .reels-folder-card:not(.trip-pill--dragging) {
    animation: reelsJiggle 0.3s ease-in-out infinite;
}
body.list-reorder-active .reels-folder-card:nth-child(even):not(.trip-pill--dragging) {
    animation-name: reelsJiggle2;
}
/* "Add pins" — mirrors the itinerary "Add Location" bar (own full-width
   section + divider, tinted pill), but in blue instead of red. Full-bleed to
   the panel edges (cancels #saved-list's 14px padding). */
.pins-sublist-toolbar {
    margin: 0 -14px 8px;
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--al);
}
.pins-sublist-toolbar .reels-toolbar-btn {
    flex: 1;
    padding: 9px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(26,115,232,0.12);
    border: 1px solid rgba(26,115,232,0.5);
    color: var(--am);
    border-radius: 20px;
}
.pins-sublist-toolbar .reels-toolbar-btn i { color: var(--am); font-size: 14px; }
.pins-sublist-toolbar .reels-toolbar-btn:active { transform: scale(0.99); background: rgba(26,115,232,0.2); }
/* Empty custom-list state. */
.pins-list-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 44px 24px 24px; gap: 4px;
}
.pins-list-empty-icon {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px;
    background: rgba(26,115,232,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--am); font-size: 30px;
}
.pins-list-empty-icon i { color: var(--am); }
.pins-list-empty-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.pins-list-empty-sub { font-size: 13px; color: var(--sub); margin: 0 0 12px; max-width: 240px; line-height: 1.5; }
.pins-list-empty-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 22px; border-radius: 12px; border: none;
    background: var(--am); color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pins-list-empty-btn i { font-size: 16px; color: #fff; }
.pins-list-empty-btn:active { transform: scale(0.97); }
.pinlist-pick .pinlist-check { font-size: 22px; color: var(--sub); flex-shrink: 0; }
/* Multi-select accent card (Add pins to list) — selected = accent border + a
   filled accent circle button. */
.pinlist-pick.pinlist-selected { border-color: var(--am) !important; background: rgba(26,115,232,0.06) !important; }
.pinlist-pick.pinlist-selected .pinlist-check-btn { background: var(--am); color: #fff; }
.pinlist-pick.pinlist-selected .pinlist-check-btn i { color: #fff; }
.reels-toolbar-btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    box-shadow: var(--elev-1);
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.reels-toolbar-btn:active { transform: translateY(1px) scale(0.98); background: var(--bg); box-shadow: none; }
.reels-toolbar-btn i { font-size: 14px; color: var(--am) !important; }

/* Empty carousel placeholder */
.reels-carousel-empty {
    flex: 1 1 auto;
    padding: 16px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: var(--sub);
    border: 1.5px dashed var(--al);
    border-radius: 12px;
    margin: 0 2px;
    text-align: center;
}

/* Section header menu button */
.reels-section-menu {
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-menu:active { background: var(--al); }
/* Per-folder layout toggle, next to the close button — matches the ⋮/× pair. */
.reels-section-layout-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 17px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-layout-btn:active { background: var(--al); }
/* The layout button already claims margin-left:auto, so the ⋮ menu after it
   shouldn't grab it again (that would split them to opposite ends). */
.reels-section-layout-btn ~ .reels-section-menu { margin-left: 0; }

/* Close button on the expanded carousel's header, same line as the title —
   the only way back to the grid now that the tapped-open folder card is no
   longer rendered while its carousel is showing. */
.reels-section-close-btn {
    /* Matches .reels-section-menu (the ⋮ button on the same header row) —
       same 32px white circle with border + shadow — so the two icon buttons
       read as a matched pair instead of the X looking smaller/plainer. */
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-close-btn:active { background: var(--al); }

/* Section context menu popup */
.section-menu-popup {
    position: absolute;
    z-index: 200;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--elev-3);
    padding: 4px;
    min-width: 160px;
    animation: fadeIn 0.12s ease;
}
.section-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.section-menu-item:active { background: var(--bg); }
.section-menu-item i { font-size: 16px; color: var(--sub); }
.section-menu-danger { color: #ef4444; }
.section-menu-danger i { color: #ef4444; }

/* Inline rename input */
.reels-rename-input {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--am);
    border-radius: 8px;
    padding: 2px 8px;
    outline: none;
    width: 140px;
}

/* Platform badge — used in reel popup header */
.feed-platform {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    margin-left: auto;
    flex-shrink: 0;
}

/* Hide map nav buttons when a reel popup / info window is open. Individually
   hiding the buttons wasn't enough — the .top-right wrapper div they sit in
   still occupied that same screen rectangle and intercepted taps meant for
   whatever popup content (e.g. the reel card's notes button) happened to
   render underneath it, since hiding a child doesn't shrink its parent's own
   hit area. Disable pointer-events on the wrapper itself too. */
body.map-controls-hidden #terrain-btn,
body.map-controls-hidden #current-location-btn,
body.map-controls-hidden #klook-toggle-btn,
body.map-controls-hidden .route-control-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.map-controls-hidden .top-right {
    pointer-events: none !important;
}
/* #search-btn lives inside .top-right and IS the control that closes search
   mode (the state that triggered map-controls-hidden in the first place) —
   disabling it along with the rest meant the first tap on it did nothing,
   and closing only worked once some other interaction cleared the hidden
   state first. Keep it tappable regardless. */
body.map-controls-hidden .top-right #search-btn {
    pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 PIN PICKER — bottom sheet with tappable location cards
   ══════════════════════════════════════════════════════════════════ */
.pin-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pin-picker-sheet {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: var(--elev-3);
    animation: fadeIn 0.18s ease;
}
/* Panel variant (pin-list pickers): no dark backdrop, white sheet matching the
   Add-to-Itinerary picker; a touch shorter, with a floating Add button. */
.pin-picker-overlay--panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pin-picker-overlay--panel .pin-picker-sheet {
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    background: var(--white);
    position: relative;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
}
.pin-picker-overlay--panel .picker-chips-bar { background: var(--white); }
/* Extra bottom padding so the last rows clear the floating Add button. */
.pin-picker-overlay--panel .pin-picker-list { padding: 10px 14px 88px; }
/* Floating "Add N" button — small, centred at the bottom of the sheet. */
.pinlist-add-floating {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 6; display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 26px; border-radius: 26px; border: none;
    background: var(--am); color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 16px rgba(26,115,232,0.4);
    -webkit-tap-highlight-color: transparent;
}
.pinlist-add-floating i { font-size: 16px; color: #fff; }
.pinlist-add-floating:active { transform: translateX(-50%) scale(0.96); }
.pin-picker-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}
.pin-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--al);
}
.pin-picker-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Add to Itinerary" sheet only — close (left) / title (centered) / sort
   (right), matching the requested layout for this specific sheet without
   touching the other pickers that reuse .pin-picker-header/.pin-picker-title
   with the close button on the right. */
/* Truly centre the title regardless of the close (left) / sort (right) buttons
   — text-align:center alone centres it in the offset flex space, not the sheet.
   Applies to the Add-to-Itinerary sheet and the pin-list pickers. */
#add-itinerary-sheet-overlay .pin-picker-header,
.pin-picker-header--centered { position: relative; }
#add-itinerary-sheet-overlay .pin-picker-title,
.pin-picker-header--centered .pin-picker-title {
    position: absolute; left: 64px; right: 64px; text-align: center;
    flex: none; pointer-events: none;
}
/* Icon-only schedule button (replaces the old "+ Schedule" text pill) for
   the itinerary-picker row — same absolute-right positioning the old badge
   had, just a small circular icon button instead of a wide text pill. */
.itinerary-picker-row .btn-schedule-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.itinerary-picker-row .btn-schedule-icon:active { transform: translateY(-50%) scale(0.9); }
/* Centered country header for the "Add to Itinerary" sheet only — other
   pickers sharing .picker-country-header/.picker-country-count keep their
   existing left-aligned-name / right-pinned-count layout. */
.add-location-picker-container .picker-country-header {
    justify-content: center;
}
.add-location-picker-container .picker-country-count {
    margin-left: 0;
}
.pin-picker-sort-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 999px;
    padding: 5px 12px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#bulletin-board-overlay .pin-picker-header {
    position: relative;
    justify-content: flex-start;
}
/* Centered-header variant (e.g. the "Add to pin…" sheet): close button on
   the LEFT, title dead-centre regardless of what flanks it — same pattern
   as the Planning Board header above. */
.pin-picker-header--centered {
    position: relative;
    justify-content: flex-start;
}
.pin-picker-header--centered .pin-picker-title {
    position: absolute;
    left: 56px;
    right: 56px;
    text-align: center;
    pointer-events: none;
}
.pin-picker-header--centered .pin-picker-close {
    margin-left: 0;
}
/* Sort button sits on the right of the header (matches the Add-to-Itinerary
   sheet); flex-start keeps close on the left, margin-left:auto pushes sort over. */
.pin-picker-header--centered .pin-picker-sort-btn { margin-left: auto; }
#bulletin-board-overlay .bulletin-picker-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}
/* Palette button relocated to the header's top-right (was in the composer's
   top row) so it's reachable without opening the compose bar. */
.bulletin-header-color-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.bulletin-color-popup--header {
    position: absolute;
    top: 100%;
    right: 16px;
    z-index: 5;
    width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* Category chips — livelier per-category colors instead of the generic blue
   "active" state shared by every other filter-chip row in the app. */
#bulletin-category-chips .filter-chip[data-cat="general"] i { color: #10B981; }
#bulletin-category-chips .filter-chip[data-cat="flight"] i { color: #EF4444; }
#bulletin-category-chips .filter-chip[data-cat="hotel"] i { color: #F59E0B; }
#bulletin-category-chips .filter-chip[data-cat="pinned"] i { color: #6366F1; }
#bulletin-category-chips .filter-chip[data-cat="pinned"].active {
    background: #6366F1 !important;
    border-color: #6366F1 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="general"].active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="flight"].active {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="hotel"].active {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3) !important;
}
#bulletin-category-chips .filter-chip.active i { color: #fff !important; }
.pin-picker-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--icon);
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 10px;
}

/* ── Standardized close (X) placement ──────────────────────────────────────
   Every overlay/sheet header puts its close X on the LEFT (top-left corner),
   matching the app's card X's (.pdc-back, .photo-lb-close, .sheet-close-btn).
   Reuses the proven .pin-picker-header--centered approach: the close button is
   ordered first (flex order), the header packs from the left, and any
   right-hand control (sort, header actions) is pushed back to the right with
   margin-left:auto. Kept as one shared rule so all sheets stay consistent. */
.pin-picker-header,
.trip-img-head,
.replace-pin-header,
.follow-list-header,
.settings-header,
.collab-panel-header,
.collab-log-modal-head {
    justify-content: flex-start !important;
    position: relative;
}
.pin-picker-close,
.trip-img-close,
.replace-pin-close,
.follow-list-close,
.settings-close,
.collab-panel-close,
.collab-log-modal-close {
    order: -1;
    margin-left: 0 !important;
    margin-right: 12px;
}
/* Right-hand header controls stay on the right of the row. (The settings title
   keeps its own margin-right:auto, which now sits it just after the left X.) */
.pin-picker-sort-btn,
.follow-list-header-actions,
.bulletin-header-color-btn {
    margin-left: auto;
}

.pin-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}
/* Inside the overlay sheet the scroll container should fill available height, not cap at 240px */
.pin-picker-list .picker-locations-scroll {
    max-height: none;
    overflow-y: visible;
    flex: 1;
}

/* ── Trip Bulletin Board ── */
#bulletin-category-chips {
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--al);
    margin-bottom: 4px;
    /* All four category pickers fit the width statically (no horizontal scroll). */
    display: flex;
    gap: 6px;
    overflow: visible;
    flex-wrap: nowrap;
}
#bulletin-category-chips .filter-chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 8px 4px;
    font-size: 12.5px;
    gap: 4px;
    white-space: nowrap;
}
#bulletin-category-chips .filter-chip i { font-size: 14px; }
.bulletin-posts-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
}
/* Chat-bubble post — owner's posts are red and right-aligned, everyone
   else's are blue and left-aligned (own tab, not "me" vs "others"), each
   with a small triangular tail pointing toward its side. */
.bulletin-post {
    position: relative;
    max-width: 80%;
    border: none;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bulletin-post--owner {
    align-self: flex-end;
    background: #E24545;
    border-bottom-right-radius: 4px;
}
.bulletin-post--guest {
    align-self: flex-start;
    background: #3B82F6;
    border-bottom-left-radius: 4px;
}
.bulletin-post--owner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.bulletin-post--guest::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.bulletin-post--pinned {
    box-shadow: 0 0 0 2px var(--am), 0 2px 6px rgba(0,0,0,0.12);
}
/* iMessage styling: my posts = blue bubble (white text) on the right; others =
   light-grey bubble (dark text) on the left. */
.bulletin-post--mine {
    align-self: flex-end;
    background: #007AFF;
    border-bottom-right-radius: 4px;
}
.bulletin-post--mine::after {
    content: ''; position: absolute; bottom: 0; right: -7px; width: 14px; height: 14px;
    background: inherit; clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.bulletin-post--theirs {
    align-self: flex-start;
    background: #E9E9EB;
    border-bottom-left-radius: 4px;
}
.bulletin-post--theirs::after {
    content: ''; position: absolute; bottom: 0; left: -7px; width: 14px; height: 14px;
    background: inherit; clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
/* Grey (others') bubble → dark text + icons for readability. */
.bulletin-post--theirs .bulletin-post-content { color: #111; }
.bulletin-post--theirs .bulletin-post-meta { color: rgba(0,0,0,0.55); }
.bulletin-post--theirs .bulletin-post-cat { background: rgba(0,0,0,0.08); color: #333; }
.bulletin-post--theirs .bulletin-pin-btn,
.bulletin-post--theirs .bulletin-delete-btn { color: rgba(0,0,0,0.5); }
.bulletin-post--theirs .bulletin-pin-btn.active { color: #111; }
/* Dark mode: keep blue for mine; others use iOS dark-grey with light text. */
body.v2.dark .bulletin-post--theirs { background: #3B3B3D; }
body.v2.dark .bulletin-post--theirs .bulletin-post-content { color: #F2F2F2; }
body.v2.dark .bulletin-post--theirs .bulletin-post-meta { color: rgba(255,255,255,0.6); }
body.v2.dark .bulletin-post--theirs .bulletin-post-cat { background: rgba(255,255,255,0.16); color: #F2F2F2; }
body.v2.dark .bulletin-post--theirs .bulletin-pin-btn,
body.v2.dark .bulletin-post--theirs .bulletin-delete-btn { color: rgba(255,255,255,0.6); }
/* White is the one chat-color swatch too light for the default white text/
   icons everywhere else — flip to dark text/icons just for this bubble, and
   add a border since a pure white bubble otherwise has no edge against the
   list's light-grey background. */
.bulletin-post--light {
    border: 1px solid var(--al);
}
.bulletin-post--light .bulletin-post-cat { background: rgba(0,0,0,0.08); color: #111; }
.bulletin-post--light .bulletin-post-meta { color: rgba(0,0,0,0.6); }
.bulletin-post--light .bulletin-pin-btn,
.bulletin-post--light .bulletin-delete-btn { color: rgba(0,0,0,0.6); }
.bulletin-post--light .bulletin-pin-btn.active { color: #111; }
.bulletin-post--light .bulletin-post-content { color: #111; }
.bulletin-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.bulletin-post-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Neutral translucent-white circle regardless of category — the coloured
       flight/hotel pastel chips didn't have enough contrast against a solid
       red/blue bubble background. Icon-only (label is now the title/tooltip)
       to save space in the post header. */
    background: rgba(255,255,255,0.24);
    color: #fff;
}
.bulletin-post-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulletin-pin-btn, .bulletin-delete-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: background 0.15s ease;
}
.bulletin-pin-btn.active { color: #fff; }
.bulletin-delete-btn:active, .bulletin-pin-btn:active { background: rgba(255,255,255,0.2); }
.bulletin-post-content {
    font-size: 13px;
    color: #fff;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;
}
.bulletin-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Extra fixed padding on top of the safe-area inset — on phones with no
       home-indicator inset (env() resolves to 0) the compose row otherwise
       sat flush against the very bottom edge. */
    padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--al);
    background: var(--white);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.bulletin-compose-toprow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* body.v2 select has a global min-height:44px (form-input reset) that beats
   a plain .bulletin-compose-select rule on specificity — qualify with the
   element type too so this one's shorter height actually wins. */
body.v2 select.bulletin-compose-select {
    flex-shrink: 0;
    height: 28px;
    min-height: 28px;
    min-width: 130px;
    border-radius: 8px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    padding: 0 10px;
}
/* Color-matched to whichever category is currently selected — same palette
   as the #bulletin-category-chips active states. */
body.v2 select.bulletin-compose-select.bulletin-cat-select-general {
    background: color-mix(in srgb, #10B981 16%, var(--bg)) !important;
    border-color: #10B981 !important;
    color: #087f5b !important;
}
body.v2 select.bulletin-compose-select.bulletin-cat-select-flight {
    background: color-mix(in srgb, #EF4444 16%, var(--bg)) !important;
    border-color: #EF4444 !important;
    color: #b91c1c !important;
}
body.v2 select.bulletin-compose-select.bulletin-cat-select-hotel {
    background: color-mix(in srgb, #F59E0B 16%, var(--bg)) !important;
    border-color: #F59E0B !important;
    color: #b45309 !important;
}
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-general { color: #6ee7b7 !important; }
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-flight { color: #fca5a5 !important; }
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-hotel { color: #fdba74 !important; }
.bulletin-post-btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    background: var(--am);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bulletin-post-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
/* Palette button — picks this user's own chat-bubble color, sitting between
   the category select and Post button in the composer's top row. */
.bulletin-color-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--sub);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bulletin-color-popup {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 10px;
}
body.v2 textarea.bulletin-compose-input {
    min-height: 52px;   /* ~2 lines */
    max-height: 116px;  /* ~5 lines, then scrolls */
}
.bulletin-compose-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    max-height: 116px;
    overflow-y: auto;
    resize: none;
    border-radius: 12px;
    border: 1px solid var(--al);
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
}
.bulletin-compose-input:focus, .bulletin-compose-select:focus {
    outline: none;
    border-color: var(--am);
}
/* Same fix for the full-page "Select Saved Places to Schedule" empty-trip
   view — it's not a modal sheet, so the list should flow with the page's
   own scroll instead of being capped at 240px with blank space below it. */
.saved-selector-list .picker-locations-scroll {
    max-height: none;
    overflow-y: visible;
}
/* Chips bar hoisted above the scrollable list — stays visible at all times */
.picker-chips-bar {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--al);
    background: var(--white);
    flex-shrink: 0;
}
.picker-chips-bar .picker-filter-chips {
    padding: 0;
}
/* Taller country tabs in the bottom-sheet pickers (Add to pin / Add to itinerary
   sheet) for a bigger, easier touch target. */
.pin-picker-sheet .picker-filter-chips .filter-chip,
.picker-chips-bar .filter-chip {
    padding: 10px 15px;
    font-size: 12.5px;
}
.pin-picker-sheet .picker-filter-chips .filter-chip i,
.picker-chips-bar .filter-chip i { font-size: 14px; }
/* Undo toast after saving a map pin */
.undo-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}
.undo-btn {
    background: none;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.share-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--sub);
    font-size: 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.share-divider::before, .share-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--al);
}
.share-save-pin-btn { border: 1.5px solid var(--am) !important; }
.picker-search-row {
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--al);
}
.picker-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--al);
    border-radius: 20px;
    background: var(--bg);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.picker-search-input:focus {
    border-color: var(--am);
}
.pin-loc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.pin-loc-item:active {
    background: color-mix(in srgb, var(--am) 10%, white);
    border-color: var(--am);
}
.pin-loc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pin-loc-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pin-loc-sub {
    font-size: 11px;
    color: var(--sub);
}
/* "Add to list" picker rows: centre the title in the full button width,
   floating the trailing +/check icon so it doesn't shift the centring. */
.list-pick-row, .list-pick-new { position: relative; justify-content: center; }
.list-pick-row .pin-loc-info, .list-pick-new .pin-loc-info {
    flex: none;
    text-align: center;
    align-items: center;
}
.list-pick-row > i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.pin-loc-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, white);
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   V2 REEL CAROUSEL — dot indicators + counter + swipe
   ══════════════════════════════════════════════════════════════════ */
.reel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 140px;
    overflow: hidden;
}
.reel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--al);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.reel-dot.active {
    background: var(--am);
    width: 11px;
    height: 11px;
}
.reel-dot-count {
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    margin-left: 4px;
    font-family: 'Outfit', sans-serif;
}
/* Carousel navigation — inline row below the reel embed
   5-column grid keeps dots truly centred (col 3) while the
   counter sits in its own space (col 4) between dots and arrow. */
.reel-nav-inline {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    padding: 14px 16px;
    background: var(--white);
    border-top: none;
    min-height: 52px;
    box-sizing: border-box;
}
.reel-nav-inline .reel-arrow:first-child {
    grid-column: 1;
    justify-self: center;
}
.reel-nav-inline .reel-dots {
    grid-column: 3;
    justify-self: center;
}
.reel-nav-inline .reel-counter {
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
}
.reel-nav-inline .reel-arrow:last-child {
    grid-column: 5;
    grid-row: 1;
    justify-self: center;
}
.reel-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--text);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.reel-arrow:hover {
    background: var(--al);
}
.reel-arrow:active { transform: scale(0.9); }

.reel-counter {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 2px 7px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS POPUP
   ══════════════════════════════════════════════════════════════════ */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    animation: fadeIn 0.15s ease;
}
.settings-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}
.settings-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Was 14px/16px — the row sat tight against the card's rounded top edge and
       the back button hugged the corner. */
    padding: 20px 20px 16px;
    min-height: 62px;
    box-sizing: border-box;
}
.settings-title {
    position: absolute; left: 0; right: 0; padding: 0 56px;
    text-align: center; pointer-events: none;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.settings-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.settings-close i { font-size: 16px; color: var(--text); }
.settings-body {
    padding: 4px 20px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Settings as a menu of sections, each opening its own sub-page. */
.settings-back {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    background: var(--bg); border: 1px solid var(--al); border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    padding: 0; flex-shrink: 0;
}
.settings-back i { font-size: 16px; color: var(--text); }
.settings-menu { display: flex; flex-direction: column; gap: 10px; }
.settings-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-radius: 12px; width: 100%;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    font-family: 'Outfit', sans-serif; transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.settings-menu-item:active { transform: translateY(1px) scale(0.99); box-shadow: none; }
.settings-menu-ico {
    display: inline-flex; width: 34px; height: 34px; border-radius: 10px;
    background: var(--bg); align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-menu-ico i { font-size: 18px; color: var(--am); }
.settings-menu-label { flex: 1; text-align: left; font-size: 14px; font-weight: 600; color: var(--text); }
.settings-menu-arrow { color: var(--sub); font-size: 15px; }
/* Admin API-usage bars */
.usage-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.usage-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.usage-label { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); }
.usage-tier { font-size: 10.5px; font-weight: 600; color: var(--sub); background: var(--bg); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.usage-count { font-size: 12.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.usage-count--over { color: #EA4335; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 999px; background: var(--am); transition: width 0.3s ease; }
.usage-bar-fill--warn { background: #F5B400; }
.usage-bar-fill--over { background: #EA4335; }
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 12px;
}
.settings-row-label {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-row-label i { font-size: 16px; color: var(--sub); }

/* Toggle switch */
.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--al);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
.toggle input:checked + .toggle-track {
    background: var(--am);
}
.toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
}

/* Theme selector buttons */
.theme-options {
    display: flex;
    gap: 8px;
}
.theme-btn, .admin-mode-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 2px solid var(--al);
    background: var(--bg);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-btn:active, .admin-mode-btn:active { transform: scale(0.97); }
.theme-btn.active, .admin-mode-btn.active {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, var(--bg));
    color: var(--am);
}
.theme-btn i, .admin-mode-btn i { font-size: 16px; }

/* Personal accent-color picker — fixed common-solid-color swatches (see
   window._ACCENT_COLORS), not free-form input. */
.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
/* 36 gradients instead of 18 flat colours, so the popup is twice as tall.
   _placeFolderColorPopup flips it above the anchor when there's no room below;
   this caps it and scrolls as a last resort (e.g. the half-height sheet, where
   neither direction fits). */
.folder-color-popup {
    width: 236px;
    max-height: min(58vh, 300px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.color-swatch {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px solid var(--al);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
/* Pale swatches need a slightly stronger outline so they don't wash out on the
   white picker. */
.color-swatch--light { border-color: rgba(0,0,0,0.18); }
.color-swatch:active { transform: scale(0.92); }
.color-swatch.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

/* Delete account */
.settings-danger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #DC2626;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
body.v2.dark .settings-danger-btn {
    background: #2A1A1A;
    border-color: #7F1D1D;
}
.settings-danger-btn:active { transform: scale(0.98); background: #FEE2E2; }
.settings-danger-btn i { font-size: 16px; }
/* Default map location section */
.dm-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--al); background: var(--bg); color: var(--text);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dm-chip i { font-size: 15px; }
.dm-chip:active { transform: scale(0.97); }
.dm-chip--active { background: var(--am); border-color: var(--am); color: #fff; }
.dm-chip--active i { color: #fff; }
.settings-reset-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 8px; padding: 10px;
    border-radius: 12px; border: 1px solid var(--al); background: var(--bg);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--sub); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.settings-reset-btn:active { transform: scale(0.98); }
.settings-reset-btn i { font-size: 15px; }
.settings-version {
    text-align: center;
    font-size: 11px;
    color: var(--ad);
    font-family: 'Inter', sans-serif;
    padding-top: 8px;
}

/* ── Place discovery card (map POI/search "Add Pin" bottom card) ────────── */
.place-discovery-card {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 96px;
    width: min(440px, calc(100vw - 24px));
    background: var(--white, #fff);
    border-radius: 18px;
    box-shadow: var(--elev-3);
    padding: 18px 18px 20px;
    z-index: 12;
    animation: pdcUp 0.22s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
}
@keyframes pdcUp {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Slide-up grip handle */
.pdc-grip {
    display: flex; justify-content: center; align-items: center;
    height: 16px; margin: -6px 0 4px; cursor: grab;
    touch-action: none;
}
.pdc-grip span {
    width: 40px; height: 4px; border-radius: 3px;
    background: var(--al); display: block;
}
.pdc-back {
    position: absolute; top: 18px; left: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--al);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text); cursor: pointer; z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.pdc-back:active { background: var(--al); }
.pdc-reel-btn {
    position: absolute; top: 18px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    /* Match the X (.pdc-back): flat grey, hairline border, no shadow. */
    background: var(--bg); border: 1px solid var(--al);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text); cursor: pointer; z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.pdc-reel-btn--danger { color: #E12D39; border-color: #f2c4c8; }
.pdc-reel-btn--danger:active { background: #fdeaec; }
/* Bottom action row (Directions / Itinerary / Reel) — 3 equal buttons. */
.pdc-actions-row { margin-top: 20px; display: flex; gap: 8px; }
.pdc-action-btn {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 11px 6px; border-radius: 12px;
    background: var(--white); border: 1px solid var(--border-soft); color: var(--text);
    box-shadow: var(--elev-2);
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pdc-action-btn i { font-size: 19px; }
/* Accent-blue icon, label keeps the default (dark) text colour. The primary
   (filled-blue) variant keeps its white icon. */
.pdc-action-btn:not(.pdc-action-primary) i { color: var(--am) !important; }
.pdc-action-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pdc-action-btn:active { transform: translateY(1px) scale(0.98); box-shadow: var(--elev-1); }
.pdc-action-primary { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.pdc-reel-btn:active { background: var(--al); }
/* Inline expandable opening-hours accordion */
.pdc-hours-toggle {
    background: none; border: none; padding: 0; margin: 0;
    width: 100%; -webkit-tap-highlight-color: transparent;
}
.pdc-hours-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; min-width: 0; }
/* The tappable target is the text + caret together (not the whole row width).
   The caret sits right after the text; tapping either opens the popover. */
.pdc-hours-trigger {
    background: none; border: none; padding: 2px 0; margin: -2px 0;
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
    cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit;
    font: inherit;
}
.pdc-hours-trigger:active { opacity: 0.6; }
.pdc-hours-trigger .pdc-hours-summary { flex: 0 1 auto; }
.pdc-caret { font-size: 13px !important; transition: transform 0.2s ease; }
.pdc-hours-block.open .pdc-caret { transform: rotate(180deg); }
.pdc-hours-acc {
    max-height: 0; overflow: hidden;
    transition: max-height 0.28s ease;
    padding-left: 23px; /* align under the clock-icon text */
}
.pdc-hours-block.open .pdc-hours-acc { max-height: 360px; margin-top: 4px; }
.pdc-title {
    margin: 0 0 10px;
    padding: 0 44px; /* symmetric: clears the back button, keeps text centred */
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 17px; font-weight: 700; line-height: 1.25;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pdc-typewrap { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* Book button — a purple "deal" button beside the destination tag; a touch
   bigger/taller than the tag so it reads as the primary CTA. */
.pdc-book-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
    color: #fff; background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%); text-decoration: none;
    padding: 7px 15px; border-radius: 20px;
    box-shadow: 0 3px 10px rgba(77,64,202,0.4);
    -webkit-tap-highlight-color: transparent;
}
.pdc-book-btn i { font-size: 15px; }
.pdc-book-btn:active { opacity: 0.85; }
.pdc-book-off {
    background: #fff; color: #ef4444; font-weight: 900; font-size: 9.5px;
    padding: 2px 6px; border-radius: 999px; margin-left: 1px;
}
/* Klook "deal" variant of the location card — orange gradient panel, with
   light-on-orange content so it reads against the background. */
.place-discovery-card--klook {
    background: linear-gradient(160deg, #FF8A3D 0%, #FF5B00 55%, #EF4E00 100%);
    color: #fff;
}
.place-discovery-card--klook .pdc-title { color: #fff; }
.place-discovery-card--klook .pdc-type { color: #fff; background: rgba(255,255,255,0.22); }
.place-discovery-card--klook .pdc-line,
.place-discovery-card--klook .pdc-line i,
.place-discovery-card--klook .pdc-line span,
.place-discovery-card--klook .pdc-rating,
.place-discovery-card--klook .pdc-rating-val,
.place-discovery-card--klook .pdc-sub,
.place-discovery-card--klook .pdc-notes { color: #fff !important; }
.place-discovery-card--klook .pdc-notes-rich * { color: #fff !important; }
.place-discovery-card--klook .pdc-grip span { background: rgba(255,255,255,0.55); }
.place-discovery-card--klook .pdc-back,
.place-discovery-card--klook .pdc-reel-btn {
    background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.6); color: #333;
}
/* Teal wash behind the metadata (rating/website/phone) and notes — echoes the
   original Klook card's teal-to-blue panels. */
.place-discovery-card--klook .pdc-info,
.place-discovery-card--klook .pdc-notes-sec {
    background: linear-gradient(135deg, rgba(0,203,208,0.9) 0%, rgba(74,144,255,0.88) 100%);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
/* Notes get a capped, self-scrolling container so a long description never
   pushes the photo gallery out of view — photos keep their own fixed section
   below. */
.place-discovery-card--klook .pdc-notes-sec {
    margin-bottom: 8px;
    max-height: 24vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Purple action buttons (Directions / Save to Pins / Photos). */
.place-discovery-card--klook .pdc-action-btn {
    background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 16px rgba(77,64,202,0.35);
}
.place-discovery-card--klook .pdc-action-btn i,
.place-discovery-card--klook .pdc-action-btn:not(.pdc-action-primary) i { color: #fff !important; }
/* Rating badge — top-right corner (star + value, underlined, opens reviews). */
.pdc-corner-slot { position: absolute; top: 18px; right: 14px; z-index: 2; }
.pdc-rating-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 800; color: #fff; text-decoration: none;
    background: rgba(255,255,255,0.22); padding: 5px 11px; border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}
.pdc-rating-badge i { font-size: 13px; color: #FFCE1F !important; }
.pdc-rating-badge span { text-decoration: underline; }
/* Keep the centred title clear of the close button + rating badge. */
.place-discovery-card--klook .pdc-title { padding: 0 46px; }
/* Klook reels = a full-width row of up to 3 tiles, shown collapsed AND
   expanded (they're the card's hero, above the notes). */
.place-discovery-card--klook .pdc-media-wrap { width: 100%; height: auto; }
.place-discovery-card--klook .pdc-reel-carousel {
    width: 100%; height: auto; overflow: visible; gap: 8px;
}
.place-discovery-card--klook .pdc-reel-tile {
    flex: 1 1 0; width: auto; height: auto; aspect-ratio: 9 / 14;
}
.place-discovery-card--klook .pdc-reel-arrow { display: none; }
.place-discovery-card.place-discovery-card--klook.expanded .pdc-media-wrap { display: block !important; }
.place-discovery-card.place-discovery-card--klook.expanded .pdc-reel-carousel { display: flex !important; }
/* No type-of-destination chip — add the vertical breathing room the chip
   would have provided, so the title doesn't sit cramped against the body. */
.place-discovery-card.pdc-no-type .pdc-title { margin-bottom: 16px; }
.pdc-type {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    padding: 3px 9px; border-radius: 20px;
}
.pdc-type i { font-size: 13px; }
/* Closure status badge (from Google business_status). Empty slot collapses. */
.pdc-status-slot:empty { display: none; }
.pdc-status-slot { text-align: center; margin: -6px 0 12px; }
.pdc-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
    padding: 4px 11px; border-radius: 20px;
}
.pdc-status-badge i { font-size: 13px; }
.pdc-status-badge--closed { color: #C0392B; background: color-mix(in srgb, #E23B3B 13%, transparent); }
.pdc-status-badge--temp { color: #B7791F; background: color-mix(in srgb, #E0A400 16%, transparent); }
body.v2.dark .pdc-status-badge--closed { color: #F2A6A6; background: rgba(226,59,59,.16); }
body.v2.dark .pdc-status-badge--temp { color: #F5C97A; background: rgba(224,164,0,.16); }
/* Expanded: the 1×1 primary photo is redundant with the gallery below, so
   hide it and let the info column take the full width + wrap (address etc.
   no longer truncates). */
/* Expanded card hides the whole media slot (photo OR reel carousel + its ‹ ›
   arrows) so the metadata column reclaims the full width, as before. */
.place-discovery-card.expanded .pdc-photo,
.place-discovery-card.expanded .pdc-media-wrap,
.place-discovery-card.expanded .pdc-reel-carousel { display: none !important; }
.place-discovery-card.expanded .pdc-info { justify-content: flex-start; }
.place-discovery-card.expanded .pdc-line span { white-space: normal; overflow: visible; }
/* Slide-up expand section: full opening hours + photo gallery + notes */
.pdc-expand {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}
.place-discovery-card.expanded .pdc-expand {
    max-height: 46vh; overflow-y: auto; opacity: 1;
    margin-top: 12px;
    -webkit-overflow-scrolling: touch;
}
.pdc-exp-title {
    display: flex; align-items: center; gap: 2px;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--sub);
    margin: 16px 0 10px;
}
.pdc-hrow {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: var(--sub); padding: 3px 0;
}
.pdc-hrow.today { color: var(--text); font-weight: 700; }
.pdc-gallery { margin-top: 4px; }
.pdc-gallery-row {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.pdc-gallery-row img {
    width: 120px; height: 120px; flex-shrink: 0;
    object-fit: cover; border-radius: 12px; background: var(--bg);
    box-shadow: var(--elev-1);
}
.pdc-notes {
    font-size: 13px; font-weight: 600; line-height: 1.6;
    white-space: pre-wrap; color: var(--text); margin-bottom: 14px;
}
.pdc-notes-sec:empty { display: none; }
/* Pencil next to the "Notes" title — opens the inline editor */
.pdc-notes-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: none; border: none; padding: 0;
    color: var(--am); font-size: 13px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-notes-editor { display: flex; flex-direction: column; gap: 8px; }
.pdc-notes-input {
    width: 100%; box-sizing: border-box; resize: none;
    border: 1px solid var(--al); border-radius: 10px; padding: 10px 12px;
    font-size: 13px; font-family: 'Inter', sans-serif; line-height: 1.5;
    color: var(--text); background: var(--bg);
}
.pdc-notes-input:focus { outline: none; border-color: var(--am); }
.pdc-notes-actions { display: flex; gap: 8px; justify-content: flex-end; }
.pdc-notes-act {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--al); border-radius: 999px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; font-family: 'Outfit', sans-serif;
    background: var(--white); color: var(--sub); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-notes-act.pdc-notes-save { background: var(--am); border-color: var(--am); color: #fff; }
.pdc-notes-act.pdc-notes-clear { margin-right: auto; }
/* Opening-hours floating popup — translucent frosted panel anchored just
   above the location card (position/width set inline by
   _pdcPositionAboveCard, matching the card's own width exactly). The backdrop
   is a full-screen transparent tap-to-close layer, not a centring flex box. */
.pdc-hours-popover {
    position: fixed; inset: 0; z-index: 19000;
    background: rgba(0,0,0,0.12);
    animation: pdcFadeIn 0.15s ease;
}
.pdc-hours-pop-card {
    background: color-mix(in srgb, var(--white) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--al);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    box-sizing: border-box;
}
.pdc-hours-pop-title {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
}
.pdc-hours-pop-title i { color: var(--am); }
/* Floating attach-a-reel card — anchored just above the location card
   (position/width set inline by _pdcPositionAboveCard). */
.pdc-attach-float,
.pdc-card-menu-float {
    z-index: 15000;
    box-sizing: border-box;
    background: var(--white); border: 1px solid var(--al);
    border-radius: 16px; padding: 12px 14px 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.22);
    display: flex; flex-direction: column; gap: 8px;
    animation: pdcFadeIn 0.15s ease;
}
/* Header: title centred, close button pinned to the LEFT. */
.pdc-attach-float-head {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 28px;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); padding-bottom: 2px;
}
.pdc-attach-float-close {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    background: var(--bg); border: 1px solid var(--al); border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; color: var(--icon); cursor: pointer; font-size: 13px;
    -webkit-tap-highlight-color: transparent;
}
/* Pin-type grid shown INSIDE the card ⋮ menu popup (replaces the old bottom
   sheet). 4 columns like the sheet; scrolls if the type list grows tall. */
.pdc-pin-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-top: 2px;
}
.pdc-attach-url-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--al); border-radius: 10px; padding: 10px 12px;
    font-size: 13px; font-family: 'Inter', sans-serif;
    color: var(--text); background: var(--bg);
}
.pdc-attach-url-input:focus { outline: none; border-color: var(--am); }
/* Reel select mode — floating banner + attach confirmation. Both anchored
   above the bottom tab bar (not the page header, which they used to cover)
   and sized to match the location card's standard width. The banner sits at
   the very bottom (closest to the tabs); the confirmation card, when shown,
   stacks directly above it (position set inline by JS — banner height varies
   with text wrap, so the confirm card's offset is computed from the banner's
   live rect, not a fixed value). */
.reel-select-banner {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 15000;
    display: flex; align-items: center; gap: 8px;
    width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
    background: color-mix(in srgb, var(--am) 92%, #000);
    color: #fff; border-radius: 999px; padding: 8px 8px 8px 14px;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    animation: pdcFadeIn 0.15s ease;
}
.reel-select-banner i { font-size: 16px; flex-shrink: 0; }
.reel-select-banner span { flex: 1; min-width: 0; }
.reel-select-cancel {
    flex-shrink: 0; background: rgba(255,255,255,0.18); border: none;
    border-radius: 999px; padding: 6px 12px; color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-select-attach {
    flex-shrink: 0; background: var(--white); border: none;
    border-radius: 999px; padding: 6px 12px; color: var(--am);
    font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-select-confirm {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 15001;
    width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
    background: var(--white); border: 1px solid var(--al);
    border-radius: 16px; padding: 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13px; color: var(--text);
    animation: pdcFadeIn 0.15s ease;
}
/* Photo lightbox — reel-viewer-v2 layout: floating close, content card over a
   blurred backdrop, bottom island selector; photos pinch-zoom. */
.photo-lb-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 92px 12px 116px; box-sizing: border-box;
    animation: pdcFadeIn 0.15s ease;
}
.photo-lb-float-btn {
    position: absolute; top: 18px; left: 16px; z-index: 7;
    width: 48px; height: 48px; border-radius: 50%; border: none;
    /* Match the reel viewer's float buttons: translucent black + blur, white
       icon, no white circle / drop shadow. */
    background: rgba(0,0,0,0.5); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.photo-lb-float-btn i { font-size: 22px; }
/* White X icon (a global icon rule otherwise wins) — matches the reel viewer.
   The "Set as cover" button re-overrides to the accent colour just below. */
.photo-lb-close.photo-lb-float-btn i { color: #fff !important; }
/* "Set as cover" button — mirrors the close button, top-RIGHT, accent icon. */
.photo-lb-cover { left: auto !important; right: 16px; }
.photo-lb-cover i { color: var(--am) !important; }
.photo-lb-cover .ph-check-circle { color: #34A853; }
/* Location title pill — floats top-centre, like the reel viewer's title pill. */
.photo-lb-title {
    position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 6; max-width: 60%;
    text-align: center; color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 15px; font-weight: 600;
    background: rgba(0,0,0,0.5); padding: 9px 18px; border-radius: 22px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-lb-card {
    max-width: 100%; max-height: 100%;
    border-radius: 20px; overflow: hidden; background: #000;
    display: flex; align-items: center; justify-content: center;
}
.photo-lb-stage {
    max-width: 100%; max-height: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.photo-lb-img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 208px);
    object-fit: contain; display: block;
    transform-origin: center center; will-change: transform;
    user-select: none; -webkit-user-drag: none;
}
.photo-lb-nav {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 6; display: flex; align-items: center; gap: 16px;
    touch-action: none;
    min-width: 200px; padding: 12px 22px;
    background: rgba(0,0,0,0.58); border-radius: 28px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.photo-lb-arrow {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.22); color: #fff;
    font-size: 26px; line-height: 1; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.photo-lb-arrow:active { background: rgba(255,255,255,0.38); }
.photo-lb-counter {
    flex: 1; text-align: center; white-space: nowrap;
    color: #fff; font-size: 14px; font-weight: 600;
}
/* Photo lightbox / carousel (legacy) */
.pdc-lightbox {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    animation: pdcFadeIn 0.15s ease;
}
@keyframes pdcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pdc-lb-close {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: none; color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-lb-stage {
    width: min(440px, calc(100vw - 24px));
    max-height: 80vh; display: flex; align-items: center; justify-content: center;
}
.pdc-lb-img { max-width: 100%; max-height: 80vh; border-radius: 12px; object-fit: contain; }
.pdc-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: none; color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-lb-prev { left: 10px; }
.pdc-lb-next { right: 10px; }
.pdc-lb-count {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; font-weight: 600;
    background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 20px;
}
/* Attach-reel action sheet + reel grid */
.pdc-reel-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--bg); border: 1px solid var(--al);
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-reel-opt i { font-size: 20px; color: var(--am); }
.pdc-reel-opt:active { background: var(--al); }
.pdc-reel-opt--danger, .pdc-reel-opt--danger i { color: #e5484d; }
/* Attached-pins row: centred title + an × on the right to unpin. */
.reel-pin-list-item { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.reel-pin-list-item .reel-pin-open { flex: 1; min-width: 0; justify-content: center; margin: 0; }
.reel-pin-list-item .reel-pin-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-pin-unpin {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--border-soft); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1); -webkit-tap-highlight-color: transparent;
}
.reel-pin-unpin i { color: #e5484d !important; font-size: 15px; }
.reel-pin-unpin:active { background: var(--al); }
.pdc-notes-empty { color: var(--sub); font-weight: 500; font-style: italic; }
.pdc-body { display: flex; gap: 14px; align-items: stretch; }
/* Centre the info column against the photo height so a sparse card (e.g. just
   an address) doesn't leave a big gap under a top-aligned single line. */
.pdc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.pdc-line {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--sub); text-decoration: none; min-width: 0;
}
.pdc-line i { font-size: 15px; flex-shrink: 0; color: var(--sub); }
.pdc-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable rows (rating/website/phone) shrink to their own content width so
   only the icon+text is tappable — the empty space to the right of the row no
   longer activates the link. (Non-link rows like the address stay full-width
   so long text can wrap.) */
.pdc-link, .pdc-rating { align-self: flex-start; max-width: 100%; }
/* Website / phone: blue link text with an underline. */
.pdc-link { color: var(--am); }
.pdc-link i { color: var(--am); }
.pdc-link span { text-decoration: underline; }
/* Rating: same link treatment as website/phone (underlined), but in the
   star's gold instead of blue — clearly a tappable link (opens reviews). */
.pdc-rating { color: #E0A400; font-weight: 700; }
.pdc-rating i { color: #F5B400; font-size: 14px; }
.pdc-rating .pdc-rating-val { text-decoration: underline; }
.pdc-rating .pdc-sub { color: #E0A400; font-weight: 500; }
.pdc-photo {
    flex-shrink: 0; width: 96px; height: 96px;
    border-radius: 12px; overflow: hidden; background: var(--bg);
}
.pdc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reel-tile carousel (shown instead of the photo when the pin has reels) —
   a horizontal, snap-scrolling row of portrait reel thumbnails. */
.pdc-reel-carousel {
    flex-shrink: 0;
    width: 108px; height: 144px;
    border-radius: 12px;
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pdc-reel-carousel::-webkit-scrollbar { display: none; }
.pdc-reel-tile {
    flex: 0 0 108px;
    width: 108px; height: 144px;
    scroll-snap-align: start;
    border-radius: 12px; overflow: hidden;
    background: var(--bg); position: relative; cursor: pointer;
}
/* Wrapper anchors the ‹ › affordances over the carousel's inside edges. */
.pdc-media-wrap { position: relative; flex-shrink: 0; width: 108px; height: 144px; }
/* Plain white chevrons (no circle) — a subtle shadow keeps them legible over
   light thumbnails. */
.pdc-reel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2; width: 20px; height: 28px; border: none; border-radius: 0;
    background: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.pdc-reel-arrow i {
    font-size: 22px; color: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.pdc-reel-arrow--l { left: 2px; }
.pdc-reel-arrow--r { right: 2px; }
.pdc-reel-arrow:active i { opacity: 0.7; }
.pdc-add {
    margin-top: 14px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px; background: var(--am); color: #fff;
    border: none; border-radius: 12px;
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-add:active { opacity: 0.9; }

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   The app had no prefers-reduced-motion support at all — including
   several INFINITE loops (spinners, the reels jiggle, the drag shake)
   which are the most likely to cause discomfort. Placed last, and with
   !important, because many transitions in this file are themselves
   !important and would otherwise win.
   Spinners keep turning (they signal "working"), just slower.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Purely decorative motion — drop entirely rather than flash once. */
    .reels-folder-card--dragover,
    .reel-edit-tile,
    .reel-drag-hint-finger,
    .reel-drag-hint-tile,
    #route-btn.route-btn-hint {
        animation: none !important;
    }
    /* Progress indicators still need to read as "in progress". */
    .ph-circle-notch, .ig-btn-spinner, .ig-spinner {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
}