/* 6.7 (2026-09-18, explorer 4.38): .jr-tile (minted / sold / handed-to) · 6.6 (2026-09-18, explorer 4.37): .jr-seg sections + .jr-sale-card · 6.5 (2026-09-18, explorer 4.36): .jr-pnl / .jr-chip.pnl — P&L two ways on sale rows and chips · 6.4 (2026-09-18, explorer 4.35): .journey — the NFT's on-chain history in the sheet */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #121212;
    color: #e5e7eb; /* gray-200 */
}
.nft-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.nft-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1), 0 6px 6px rgba(0, 255, 255, 0.09);
}
.pagination-btn, .control-btn {
    background-color: #374151; /* gray-700 */
    color: #e5e7eb; /* gray-200 */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #4b5563; /* gray-600 */
    transition: background-color 0.2s;
    font-weight: 500;
}
.pagination-btn:hover:not(:disabled), .control-btn:hover:not(:disabled) {
    background-color: #4b5563; /* gray-600 */
}
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.form-input, .form-select {
    background-color: #1f2937; /* gray-800 */
    border: 1px solid #4b5563; /* gray-600 */
    border-radius: 0.5rem;
    color: #e5e7eb;
    padding: 0.5rem 0.75rem;
}
.form-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem;
}
.aspect-w-1-aspect-h-1 { position: relative; width: 100%; padding-bottom: 100%; }
.aspect-w-1-aspect-h-1 > img { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; }

.toggle-label { display: flex; align-items: center; cursor: pointer; color: #d1d5db; }
.toggle-checkbox { opacity: 0; width: 0; height: 0; }
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; background-color: #4b5563; border-radius: 20px; transition: background-color 0.2s; }
.toggle-switch::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: white; top: 2px; left: 2px; transition: transform 0.2s; }
.toggle-checkbox:checked + .toggle-switch { background-color: #2dd4bf; }
.toggle-checkbox:checked + .toggle-switch::before { transform: translateX(16px); }

.direction-slider-container { display: flex; align-items: center; gap: 0.5rem; }
input[type="range"].direction-slider { -webkit-appearance: none; appearance: none; width: 60px; height: 16px; background: #374151; border-radius: 8px; outline: none; transition: background 0.2s; }
input[type="range"].direction-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; /* Reduced Size */
    height: 14px; /* Reduced Size */
    background: #9ca3af;
    border-radius: 50%;
    border: 2px solid #1f2937;
    cursor: pointer;
    margin-top: 1px; /* Re-centered */
}
input[type="range"].direction-slider:disabled { opacity: 0.4; }
input[type="range"].direction-slider:disabled::-webkit-slider-thumb { background: #4b5563; }

.multi-select-container { position: relative; }
.multi-select-button {
    background-color: #1f2937; border: 1px solid #4b5563; border-radius: 0.5rem;
    color: #e5e7eb; padding: 0.5rem 0.75rem; width: 100%; text-align: left;
    display: flex; justify-content: space-between; align-items: center;
    height: 42px;
}
.multi-select-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-select-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background-color: #1f2937; border: 1px solid #4b5563; border-radius: 0.5rem;
    max-height: 200px; overflow-y: auto; margin-top: 4px;
}
.multi-select-dropdown label {
    display: block; padding: 0.5rem 0.75rem; cursor: pointer;
    border-bottom: 1px solid #374151;
}
.multi-select-dropdown label:hover { background-color: #374151; }
.multi-select-dropdown label:last-child { border-bottom: none; }
.multi-select-dropdown input { margin-right: 0.5rem; }

.modal-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 50; backdrop-filter: blur(4px);
}
.modal-content {
    background-color: #1f2937; border: 1px solid #4b5563;
    border-radius: 0.75rem; padding: 1.5rem;
    max-width: 90vw; max-height: 90vh;
    width: 800px;
    overflow-y: auto;
    position: relative;
}
.modal-close-btn {
    position: absolute; top: 1rem; right: 1rem;
    color: #9ca3af; cursor: pointer;
}
.modal-close-btn:hover { color: #e5e7eb; }

.view-toggle-btn {
    padding: 0.5rem 1.5rem;
    border: 2px solid #4b5563;
    color: #9ca3af;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    flex: 1;
}
.view-toggle-btn.active {
    color: #e5e7eb;
    background-color: #4b5563;
    border-color: #6b7280;
}
.image-container { /* Helper class */
    position: relative;
}
.broken-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(220, 38, 38, 0.85);
    color: white;
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    letter-spacing: 0.1em;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.top-right-stack {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 6;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.top-right-stack .overlay-icon {
    width: 40px;
    height: 40px;
    object-fit: contain; /* Fix for distorted logos */
    pointer-events: none;
}
.top-left-toggle {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 7;
    cursor: pointer;
    background-color: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    transition: background-color 0.2s;
}
.top-left-toggle:hover {
    background-color: rgba(0,0,0,0.8);
}
.badges-hidden .top-right-stack,
.badges-hidden .broken-banner,
/* 2026-09-14 (6.1): the listing-price pill. The app has built this element since 2026-08-12 (token amount + USD
   for every listed NFT) but no rule ever positioned or coloured it, so it rendered as an unstyled block off the
   visible card — "listed NFTs don't show their price" (owner, 2026-09-14). Bottom-left of the art, out of the way
   of the top-right marketplace badges and the bottom-right showcase picker. */
.listing-price-pill {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 4px 8px; border-radius: 8px;
    background: rgba(17, 24, 39, 0.86); border: 1px solid rgba(45, 212, 191, 0.45);
    backdrop-filter: blur(4px); pointer-events: none;
    transition: opacity 0.2s;
}
.listing-price-pill .lp-amt { color: #f9fafb; font-size: 0.85rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.listing-price-pill .lp-usd { color: #5eead4; font-size: 0.72rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.listing-price-pill .lp-none { color: #9ca3af; font-weight: 500; font-size: 0.72rem; }
.broken .listing-price-pill, .listing-price-pill.above-banner { bottom: 44px; }   /* clear the red BROKEN banner */
/* 4.33 / 6.2 (2026-09-17, the #745 lesson): a chain-only BBL listing — live on the contract, hidden by BBL's UI.
   Amber ring + a third line inside the same pill; the eye still hides it with the rest. */
.listing-price-pill.chain-only { border-color: rgba(251, 191, 36, 0.7); }
.listing-price-pill .lp-chain { color: #fbbf24; font-size: 0.62rem; font-weight: 600; line-height: 1.15; white-space: nowrap; letter-spacing: 0.01em; }
/* 2026-08-12: the eye exists to show the ART with nothing on top of it, so the
   listing-price pill and the showcase picker hide with the badges. */
.badges-hidden .listing-price-pill,
.badges-hidden .showcase-pick {
    opacity: 0;
    pointer-events: none;
}
.filter-section-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}
.address-suggestions {
    position: absolute;
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    z-index: 100;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    top: 100%;
}
.address-suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-family: monospace;
    font-size: 0.875rem;
}
.address-suggestion-item:hover {
    background-color: #374151;
}
#copy-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #10B981;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#copy-toast.show {
    opacity: 1;
    transform: translate(-50%, -1rem);
}
#leaderboard-table {
    border: 1px solid #374151;
    border-radius: 0.5rem;
    overflow: hidden;
}
.leaderboard-header, .leaderboard-row {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    align-items: center;
}
.leaderboard-header {
    background-color: #374151;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #4b5563;
}
.leaderboard-header > span {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
 .leaderboard-header > span.text-center {
    justify-content: center;
 }
.leaderboard-header > span.sort-active {
    color: #ffffff;
    background-color: #4b5563;
    border-radius: 0.375rem;
    padding: 0.1rem 0.4rem;
    transition: background-color 0.2s;
}
.sort-icon {
    opacity: 0.3;
    transition: opacity 0.2s;
}
.sort-icon.active {
    opacity: 1;
    color: white;
}
.leaderboard-row {
    border-bottom: 1px solid #374151;
    cursor: pointer;
    transition: background-color 0.2s;
}
.leaderboard-row:hover {
    background-color: #374151;
}
.leaderboard-row:last-child {
    border-bottom: none;
}
.leaderboard-row.selected {
    background-color: #4b5563;
}
#space-canvas {
    display: block;
    width: 100%;
    height: 75vh;
    background: #000;
    border-radius: 0.5rem;
    border: 1px solid #374151;
    cursor: grab;
    touch-action: none; /* Prevent browser touch handling */
}

/* Address Direction Toggle */
#address-direction-toggle,
#wallet-address-direction-toggle {
    background-color: #374151;
    border: 1px solid #4b5563;
    color: #9ca3af;
    transition: all 0.2s;
}
#address-direction-toggle:hover,
#wallet-address-direction-toggle:hover {
    background-color: #4b5563;
    color: #e5e7eb;
}
#address-direction-toggle.active,
#wallet-address-direction-toggle.active {
    background-color: #2dd4bf;
    color: #1f2937;
    border-color: #2dd4bf;
}

/* Trait Rarity Medals */
.trait-medal {
    font-size: 1rem;
    line-height: 1;
}
.trait-medal.gold {
    filter: drop-shadow(0 0 2px #ffd700);
}
.trait-medal.silver {
    filter: drop-shadow(0 0 2px #c0c0c0);
}
.trait-medal.bronze {
    filter: drop-shadow(0 0 2px #cd7f32);
}

/* ==================== MOBILE RESPONSIVE STYLES ==================== */

/* ==================== MOBILE: HEADER ==================== */
@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }
    
    header {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    header > a img {
        height: 2rem;
    }
    
    /* Nav tabs full width */
    header .flex.rounded-lg {
        width: 100%;
        max-width: 100%;
    }
    
    .view-toggle-btn {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ==================== MOBILE: COLLECTION FILTERS ==================== */
@media (max-width: 768px) {
    /* Main filter container */
    #collection-view > .p-6,
    #collection-view > .p-4 {
        padding: 0.75rem !important;
    }
    
    /* Search and Sort - stack vertically */
    #collection-view .grid.grid-cols-1.md\\:grid-cols-2 {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Inputs */
    .form-input, .form-select {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.625rem 0.5rem;
    }
    
    /* Address search section - stack label above controls */
    #collection-view .grid.grid-cols-1.md\\:grid-cols-3 {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* The address input container - make input visible */
    #collection-view .relative.md\\:col-span-2 {
        width: 100%;
    }
    
    /* Stack address controls: input on top, buttons below */
    #collection-view .relative.md\\:col-span-2 > .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Make the text input full width on its own row */
    #collection-view #search-address {
        order: -1;
        width: 100% !important;
        flex: none !important;
    }
    
    /* Direction toggle, dropdown, copy btn on second row */
    #collection-view #address-direction-toggle {
        flex: 0 0 auto;
    }
    
    #collection-view #address-dropdown {
        flex: 1;
        min-width: 100px;
    }
    
    /* Amount and Reset row */
    #collection-view .flex.items-end.gap-4,
    #collection-view .flex.justify-end.items-end.gap-4 {
        justify-content: space-between;
        width: 100%;
    }
    
    /* ===== STATUS FILTERS - Same as Inhabitant/Planet ===== */
    #status-filters-grid:not(.hidden) {
        display: grid !important;
    }
    
    /* Extra filters section - always hidden now */
    #status-filters-extra {
        display: none !important;
    }
    
    /* Trait dropdowns */
    .multi-select-container {
        width: 100%;
    }
    
    /* Display Options - 2x2 grid */
    #trait-toggles-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Filter section titles - make tappable */
    .filter-section-title {
        font-size: 0.875rem;
        cursor: pointer;
    }
    
    /* Inhabitant/Planet/Status filter containers */
    #inhabitant-filters-container,
    #planet-filters-container,
    #status-filters-grid {
        max-height: 250px;
        overflow-y: auto;
    }
    
    /* Collapsible section arrows */
    #inhabitant-arrow,
    #planet-arrow,
    #status-arrow {
        transition: transform 0.2s ease;
    }
}

/* ==================== MOBILE: NFT CARDS ==================== */
@media (max-width: 768px) {
    /* 2 cards per row on mobile */
    #nft-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Single card should not stretch full width */
    .nft-card:only-child {
        max-width: 200px !important;
        width: 200px !important;
        margin: 0 auto !important;
    }
    
    /* When gallery has single-card class, center it */
    #nft-gallery.single-card,
    #wallet-gallery.single-card {
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Card styling */
    .nft-card {
        border-radius: 0.5rem;
    }
    
    .nft-card .p-3,
    .nft-card .p-4 {
        padding: 0.5rem !important;
    }
    
    /* Card title - shorter format */
    .nft-card h2,
    .nft-card h3 {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* HIDE TRAITS BY DEFAULT ON MOBILE - cards are just image + title */
    .nft-card ul {
        display: none !important;
    }
    
    /* Remove flex-grow that causes empty space */
    .nft-card .flex-grow {
        flex-grow: 0 !important;
    }
    
    /* Badge icons on cards - smaller */
    .nft-card .absolute img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Broken banner */
    .nft-card .absolute.bottom-0 {
        font-size: 0.6rem !important;
        padding: 0.125rem !important;
    }
}

/* Very small phones - still 2 columns but tighter */
@media (max-width: 380px) {
    #nft-gallery {
        gap: 0.375rem !important;
    }
    
    .nft-card h3 {
        font-size: 0.7rem !important;
    }
}

/* ==================== MOBILE: PAGINATION ==================== */
@media (max-width: 768px) {
    #pagination-container {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .pagination-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    /* Amount display */
    .text-4xl {
        font-size: 1.5rem;
    }
}

/* ==================== MOBILE: WALLET VIEW ==================== */
@media (max-width: 768px) {
    #wallet-view {
        padding: 0.5rem;
    }
    
    #wallet-view > .p-4 {
        padding: 0.75rem !important;
    }
    
    /* Wallet search - same layout as collection */
    #wallet-view .relative.md\\:col-span-2 > .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    #wallet-view #wallet-search-address {
        order: -1;
        width: 100% !important;
        flex: none !important;
    }
    
    /* ===== LEADERBOARD TABLE - CLEAN MOBILE VIEW ===== */
    #leaderboard-table {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    
    /* HIDE header row completely on mobile */
    #leaderboard-table > .leaderboard-header,
    #leaderboard-table > .leaderboard-row:first-child {
        display: none !important;
    }
    
    /* Data rows */
    .leaderboard-row:not(.leaderboard-header) {
        display: flex !important;
        align-items: center !important;
        padding: 0.625rem 0.75rem !important;
        background: rgba(55, 65, 81, 0.3) !important;
        border-radius: 0.375rem !important;
        font-size: 0.8rem !important;
        gap: 0.5rem !important;
        min-width: unset !important;
        grid-template-columns: unset !important;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .leaderboard-row:active {
        background: rgba(55, 65, 81, 0.6) !important;
    }
    
    .leaderboard-row.selected {
        background: rgba(45, 212, 191, 0.2) !important;
        border: 1px solid rgba(45, 212, 191, 0.4);
    }
    
    /* Hide all data columns except Rank, Address, Total */
    .leaderboard-row > span {
        display: none !important;
    }
    
    /* Rank */
    .leaderboard-row > span:nth-child(1) {
        display: block !important;
        width: 50px;
        text-align: center;
        font-weight: bold;
        color: #2dd4bf;
    }
    
    /* Address */
    .leaderboard-row > span:nth-child(2) {
        display: block !important;
        flex: 1;
        font-family: monospace;
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Total (last child) */
    .leaderboard-row > span:last-child {
        display: flex !important;
        width: auto;
        min-width: 50px;
        justify-content: center;
        font-weight: bold;
        background: rgba(45, 212, 191, 0.2);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }
    
    /* Wallet gallery - 2 columns */
    #wallet-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Wallet status filters - 2x2 grid */
    #wallet-status-filters {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    #wallet-status-filters label {
        font-size: 0.75rem;
    }
    
    /* Wallet trait toggles */
    #wallet-trait-toggles-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Address suggestions dropdown - show end of address */
    .address-suggestions {
        max-height: 200px;
    }
    
    .address-suggestions > div {
        font-size: 0.65rem !important;
        padding: 0.625rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==================== MOBILE: MAP VIEW ==================== */
@media (max-width: 768px) {
    #map-view {
        padding: 0.5rem;
    }
    
    #space-canvas {
        height: 60vh;
        touch-action: none; /* Critical: allows canvas to handle touch */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ==================== MOBILE: MODALS ==================== */
@media (max-width: 768px) {
    .modal-backdrop {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 2rem;
    }
    
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        margin: 0;
        padding: 1rem !important;
        border-radius: 0.75rem;
    }
    
    .modal-content h2 {
        font-size: 1.125rem;
        padding-right: 2rem;
    }
    
    /* Modal close button */
    .modal-close-btn {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* NFT detail modal - image smaller */
    .modal-content img.rounded-lg {
        max-height: 250px;
        object-fit: contain;
    }
    
    /* Share buttons - stack */
    .modal-content .flex.gap-2 {
        flex-direction: column;
    }
    
    .modal-content .flex.gap-2 button {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== MOBILE: FOOTER ==================== */
@media (max-width: 768px) {
    footer {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 2rem;
    }
    
    footer button {
        font-size: 0.8rem;
    }
    
    /* Disclaimer text */
    footer + div {
        padding: 0 0.5rem;
    }
}

/* ==================== MOBILE: UTILITY ==================== */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    main, #collection-view, #wallet-view, #map-view {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Better touch targets */
    button, .toggle-label, .control-btn {
        min-height: 44px;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
}

/* Spinning loader animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* ---- 6.4: NFT journey (modal) --------------------------------------------------------------- */
.journey { margin-top: 1rem; border-top: 1px solid #374151; padding-top: 0.75rem; }
.journey .jr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.journey .jr-title { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; font-weight: 600; }
.journey .jr-src { font-size: 0.7rem; color: #6b7280; }
.journey .jr-sum { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.journey .jr-chip { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 9999px; background: #111827; border: 1px solid #374151; color: #d1d5db; white-space: nowrap; }
.journey .jr-chip b { color: #f9fafb; font-weight: 600; }
.journey .jr-chip.hot { border-color: rgba(34, 211, 238, 0.45); color: #a5f3fc; }
.journey .jr-chip.warn { border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.journey ol { list-style: none; margin: 0; padding: 0; position: relative; }
.journey ol::before { content: ''; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: #374151; }
.journey li { position: relative; padding: 0.3rem 0 0.3rem 1.6rem; font-size: 0.85rem; line-height: 1.3; }
.journey li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62rem; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: #6b7280; border: 2px solid #1f2937; }
.journey li .jr-day { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #9ca3af; margin-right: 0.5rem; }
.journey li .jr-h { color: #e5e7eb; }
.journey li .jr-sub { display: block; color: #9ca3af; font-size: 0.75rem; margin-top: 0.05rem; }
.journey li .jr-tx { color: #6b7280; text-decoration: none; font-size: 0.7rem; margin-left: 0.4rem; }
.journey li .jr-tx:hover { color: #67e8f9; }
.journey li.jr-origin::before { background: #22d3ee; }
.journey li.jr-sale::before { background: #34d399; }
.journey li.jr-sale .jr-h { color: #a7f3d0; }
.journey li.jr-market::before { background: #fbbf24; }
.journey li.jr-stake::before { background: #a78bfa; }
.journey li.jr-move::before { background: #60a5fa; }
.journey li.jr-break::before { background: #f87171; }
.journey li.jr-admin, .journey li.jr-minor { opacity: 0.6; }
.journey li.jr-admin .jr-h, .journey li.jr-minor .jr-h { color: #9ca3af; font-size: 0.8rem; }
.journey li.jr-gap .jr-h::before { content: '⚠ '; color: #fbbf24; }
.journey .jr-empty, .journey .jr-loading, .journey .jr-error { font-size: 0.8rem; color: #9ca3af; padding: 0.25rem 0; }
.journey .jr-error { color: #fca5a5; }
.journey .jr-toggle { background: none; border: 0; color: #67e8f9; font-size: 0.75rem; cursor: pointer; padding: 0.2rem 0; }
.journey.jr-collapsed li.jr-admin, .journey.jr-collapsed li.jr-minor { display: none; }
.journey .jr-pnl { color: #d1d5db; }
.journey .jr-pnl.up { color: #a7f3d0; }
.journey .jr-pnl.down { color: #fecaca; }
.journey .jr-chip.pnl.up { border-color: rgba(52, 211, 153, 0.5); color: #a7f3d0; }
.journey .jr-chip.pnl.down { border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }
.journey .jr-chip.hold { border-color: rgba(167, 139, 250, 0.45); color: #ddd6fe; }

/* ---- 6.6: journey sections (one per holder) + the sale card ---------------------------------- */
.journey .jr-seg { margin: 0.6rem 0 0.2rem; border: 1px solid #374151; border-radius: 0.6rem; padding: 0.45rem 0.6rem 0.35rem; background: rgba(17, 24, 39, 0.35); }
.journey .jr-seg-now { border-color: rgba(34, 211, 238, 0.4); }
.journey .jr-seg-admin { opacity: 0.6; border-style: dashed; }
.journey.jr-collapsed .jr-seg-admin { display: none; }
.journey .jr-seg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; color: #e5e7eb; margin-bottom: 0.25rem; }
.journey .jr-seg-n { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #67e8f9; font-weight: 700; }
.journey .jr-seg-head .jr-who { font-weight: 600; color: #f9fafb; }
.journey .jr-seg-meta { color: #9ca3af; font-size: 0.75rem; flex-basis: 100%; }
.journey .jr-seg ol::before { left: 0.45rem; }
.journey .jr-sale-li { padding-left: 0 !important; }
.journey .jr-sale-li::before { display: none; }
.journey .jr-sale-card { border: 1px solid rgba(52, 211, 153, 0.45); border-radius: 0.5rem; padding: 0.45rem 0.6rem; background: rgba(6, 78, 59, 0.18); margin: 0.2rem 0 0.4rem; font-size: 0.8rem; }
.journey .jr-sale-head { color: #a7f3d0; margin-bottom: 0.3rem; }
.journey .jr-sale-head b { color: #d1fae5; }
.journey .jr-side { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; padding: 0.2rem 0; border-top: 1px dashed #374151; }
.journey .jr-role { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; min-width: 3.2rem; }
.journey .jr-side .jr-who { color: #f9fafb; font-weight: 600; }
.journey .jr-side-body { flex-basis: 100%; color: #d1d5db; font-size: 0.76rem; line-height: 1.35; }
.journey .jr-side-body b.pos { color: #a7f3d0; }
.journey .jr-side-body b.neg { color: #fecaca; }
.journey .jr-note { color: #9ca3af; }

/* ---- 6.7: boundary tiles — the events between holders ---------------------------------------- */
.journey .jr-tile { display: flex; gap: 0.6rem; align-items: stretch; margin: 0.7rem 0 0.35rem; border-radius: 0.7rem; border: 1px solid #374151; overflow: hidden; background: #111827; }
.journey .jr-tile-art { position: relative; flex: 0 0 4.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: linear-gradient(135deg, #1f2937, #111827); }
.journey .jr-tile-ribbon { position: absolute; bottom: 0.25rem; left: 0; right: 0; text-align: center; font-size: 0.55rem; letter-spacing: 0.18em; font-weight: 800; color: #e5e7eb; opacity: 0.85; }
.journey .jr-tile-body { flex: 1 1 auto; padding: 0.45rem 0.6rem 0.4rem 0; min-width: 0; }
.journey .jr-tile-head { font-size: 0.85rem; color: #e5e7eb; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.journey .jr-tile-head b { color: #f9fafb; }
.journey .jr-tile-amt { color: #fde68a; font-weight: 600; }
.journey .jr-tile-sale { border-color: rgba(52, 211, 153, 0.55); background: linear-gradient(90deg, rgba(6, 78, 59, 0.35), rgba(17, 24, 39, 0.6)); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12), 0 6px 18px -12px rgba(52, 211, 153, 0.6); }
.journey .jr-tile-sale .jr-tile-art { background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.35), rgba(6, 78, 59, 0.25)); }
.journey .jr-tile-sale .jr-tile-ribbon { color: #a7f3d0; }
.journey .jr-tile-sale .jr-side { border-top: 1px dashed rgba(52, 211, 153, 0.25); }
.journey .jr-tile-mint { border-color: rgba(34, 211, 238, 0.5); background: linear-gradient(90deg, rgba(8, 47, 73, 0.4), rgba(17, 24, 39, 0.6)); }
.journey .jr-tile-mint .jr-tile-art { background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.35), rgba(8, 47, 73, 0.3)); }
.journey .jr-tile-mint .jr-tile-ribbon { color: #a5f3fc; }
.journey .jr-tile-hand { border-style: dashed; margin-top: 0.45rem; }
.journey .jr-tile-hand .jr-tile-art { flex-basis: 2.6rem; font-size: 1.1rem; }
.journey .jr-tile-hand.jr-gap { border-color: rgba(251, 191, 36, 0.45); }
.journey .jr-seg { margin-top: 0.15rem; }