/* ===== MOBILE-FIRST BASE STYLES (320px+) ===== */

/* Global horizontal overflow prevention */
html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    overflow-x: hidden;
}

/* ===== AUTO-SUBMIT PAGE BUTTONS (scoped to not affect navbar) ===== */
.auto-submit-container .btn {
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

.auto-submit-container .btn-primary {
    background: #1DB954;
    color: white;
}

.auto-submit-container .btn-primary:hover:not(:disabled) {
    background: #1ed760;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}

.auto-submit-container .btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.auto-submit-container .btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* ===== LOGGED OUT: GOOGLE-STYLE MINIMAL ===== */
.auto-submit-container.logged-out {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.auto-submit-container.logged-out .logged-out-view {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.auto-submit-container.logged-out .step-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #333;
    margin: 0 0 0.5rem 0;
}

.auto-submit-container.logged-out .step-description {
    font-size: 0.9375rem;
    color: #666;
    margin: 0 0 2rem 0;
}

.auto-submit-container.logged-out .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    opacity: 0.5;
}

.auto-submit-container.logged-out .spotify-url-input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    min-height: 56px;
    box-sizing: border-box;
}

.auto-submit-container.logged-out .signin-prompt {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.auto-submit-container.logged-out .btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: white;
    color: #333;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 48px;
}

.auto-submit-container.logged-out .btn-google:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    border-color: #d2d2d2;
}

.auto-submit-container.logged-out .signin-note {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: #666;
}

/* Tablet+ */
@media (min-width: 640px) {
    .auto-submit-container.logged-out {
        padding: 2rem;
    }

    .auto-submit-container.logged-out .step-title {
        font-size: 2rem;
    }

    .auto-submit-container.logged-out .step-description {
        font-size: 1rem;
    }
}

/* ===== LOGGED IN STYLES ===== */
.auto-submit-container:not(.logged-out) {
    max-width: 100%;
    /* Mobile-first: generous bottom padding to account for sticky footer + browser toolbar */
    padding: 0 1rem calc(160px + env(safe-area-inset-bottom, 0px)) 1rem;
    box-sizing: border-box;
}

/* Hero section - takes up viewport on mobile */
/* Mobile: Use flex-start to prevent content jumping when keyboard opens */
.auto-submit-container:not(.logged-out) .step-track {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px); /* Dynamic viewport for mobile */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15vh 1rem 2rem 1rem; /* Top padding positions content nicely on mobile */
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* After track is selected, shrink the hero section */
.auto-submit-container.track-selected .step-track {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 1rem;
}

/* Other steps - normal flow */
.auto-submit-container:not(.logged-out) .step:not(.step-track) {
    max-width: 650px;
    margin: 0 auto 1rem auto;
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auto-submit-container:not(.logged-out) .step-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 auto 0.5rem auto;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.2;
}

.auto-submit-container:not(.logged-out) .step-description {
    font-size: 1rem;
    color: #666;
    margin: 0 auto 2rem auto;
    text-align: center;
    max-width: 320px;
}

.auto-submit-container:not(.logged-out) .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* Track Input with Search */
.track-input-wrapper {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

.input-hint {
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0.5rem 0 0 0;
}

.track-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.track-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.1s ease;
    min-height: 56px;
}

.track-result:hover,
.track-result.focused,
.artist-search-result.focused {
    background: #f3f4f6;
}

.track-result-image {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.track-result-info {
    flex: 1;
    min-width: 0;
}

.track-result-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-result-artist {
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-result-duration {
    font-size: 0.8125rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.track-search-status {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.track-search-status.error {
    color: #dc2626;
}

.track-search-status i {
    margin-right: 0.5rem;
}

/* Stacks the timeout message + retry button as a single column-flex child
   of .error-message, so they sit beside the ::before warning icon rather
   than spreading across the row as separate flex items. */
.track-info-timeout-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1;
}

/* Tap-to-retry button used by artist-search-timeout and track-info-timeout
   handlers. Sized to the 44x44 mobile-tap target and laid out as its own
   row so it never gets visually crowded by the surrounding error/status copy. */
.track-search-retry {
    margin-top: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 0.9375rem;
    cursor: pointer;
}

.track-search-retry:hover,
.track-search-retry:focus {
    background: #f9fafb;
}

.auto-submit-container:not(.logged-out) .spotify-url-input {
    width: 100%;
    padding: 1.125rem 1.25rem 1.125rem 3.25rem;
    font-size: 1.0625rem;
    border: 2px solid #d1d5db;
    border-radius: 16px;
    transition: all 0.2s;
    min-height: 60px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.auto-submit-container:not(.logged-out) .spotify-url-input::placeholder {
    color: #9ca3af;
    font-size: 0.9375rem;
}

@media (min-width: 640px) {
    .auto-submit-container:not(.logged-out) .spotify-url-input::placeholder {
        font-size: inherit;
    }
}

.auto-submit-container:not(.logged-out) .spotify-url-input:focus {
    outline: none;
    border-color: #1DB954;
    box-shadow: 0 2px 12px rgba(29, 185, 84, 0.15);
}

.auto-submit-container .btn-cta {
    width: 100%;
    margin-top: 1rem;
}

.auto-submit-container .btn-outline {
    background: white;
    color: #333;
    border: 2px solid #e0e0e0;
}

.auto-submit-container .btn-outline:hover {
    border-color: #1DB954;
    color: #1DB954;
}

.input-hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #666;
    text-align: center;
}

.error-message {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    margin-top: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.error-message::before {
    content: "⚠️";
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Track Preview */
.track-preview-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.track-artwork {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.track-info {
    flex: 1;
    min-width: 0;
}

.track-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-artists {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Exploratory callout banner */
.exploratory-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.exploratory-callout-icon { flex-shrink: 0; color: #3b82f6; margin-top: 1px; }
.exploratory-callout-text { font-size: 0.875rem; color: #1e40af; line-height: 1.5; }

/* Engagement nudge — surfaces only when user has matches but no chips
   tapped. Lighter visual weight than the exploratory-callout (which fires
   on actual cold-start). The point is to suggest, not to alarm. */
.chip-engagement-callout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    color: #166534;
    line-height: 1.45;
}

/* Real-time delta on chip toggle. Inline next to the match count so the
   user's eye, drawn there by the count animation, immediately sees the
   "+N new" / "-N" feedback that explains what their tap did. */
.match-count-delta {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    vertical-align: middle;
}
.match-count-delta.visible {
    opacity: 1;
    transform: translateY(0);
}
.match-count-delta.positive { color: #10b981; }
.match-count-delta.negative { color: #ef4444; }
.match-count-delta.neutral  { color: #6b7280; }

/* Brief pulse on the recommendations count when it changes due to a chip
   toggle. Reinforces that the user's tap caused the new number. */
@keyframes recCountPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); color: #10b981; }
    100% { transform: scale(1); }
}
.recommendations-count.count-pulse {
    display: inline-block;
    animation: recCountPulse 0.55s ease-out;
    transform-origin: center;
}


/* Context Section (Optional Fine-tuning) */
.context-section {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.context-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    list-style: none; /* Remove default arrow */
    min-height: 48px; /* Touch target */
}

.context-toggle::-webkit-details-marker {
    display: none; /* Hide default arrow in webkit */
}

.context-toggle-icon {
    transition: transform 0.2s;
}

.context-section[open] .context-toggle-icon {
    transform: rotate(180deg);
}

.context-content {
    padding-top: 0.75rem;
}

.context-group {
    margin-bottom: 1rem;
}

.context-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.context-hint {
    font-size: 0.75rem;
    color: #999;
    margin: 0 0 0.75rem 0;
}

/* Artist Chips */
.artist-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.artist-chip {
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px; /* Touch target */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.artist-chip:hover {
    border-color: #1DB954;
}

/* Example chips — only rendered in true cold-start (no co-occurrence,
   no genre-fallback, no collaborators). Visually distinct from real
   suggestion chips so it's clear they're demonstrating the pattern,
   not recommending these specific artists. Tapping focuses the search
   input below — see focusArtistSearch in auto_submit.js. */
.artist-chip.chip-example {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #fafafa;
    color: #6b7280;
    font-style: italic;
    opacity: 0.85;
}

.artist-chip.chip-example:hover {
    border-color: #94a3b8;
    background: #f5f5f5;
    opacity: 1;
}

.artist-chip.chip-example:active {
    transform: scale(0.97);
}

/* "+" affordance on unselected chips: communicates tappability statically.
   Hover/touch don't reach the user before they decide to tap, so the static
   "+" is the discoverability signal. Disappears once selected.
   Self-artist excluded — "+ Artist (you)" reads weird if deselected.
   Examples excluded — tapping them focuses search, doesn't add directly. */
.artist-chip:not(.selected):not(.self-artist):not(.chip-example)::before {
    content: "+ ";
    color: #888;
    font-weight: 500;
    margin-right: -2px;
}

.artist-chip:active:not(.selected) {
    background: #f0fdf4;
    border-color: #1DB954;
    transform: scale(0.97);
}

.artist-chip.selected {
    background: #1DB954;
    border-color: #1DB954;
    color: white;
}

.artist-chip-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.artist-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    transition: all 0.2s;
    min-height: 44px; /* Touch target */
}

.artist-search-input:focus {
    outline: none;
    border-color: #1DB954;
}

/* font-size escalation only: scoped through the container so we beat
   main.css's global `input[type="text"]` rule (specificity 0,1,1).
   Without this two-class chain the global's 15px wins and iOS Safari
   still auto-zooms on focus (threshold is 16px). Kept as a separate
   rule from the base .artist-search-input above so we don't
   accidentally override main.css for padding/border/border-radius too. */
.artist-search-container .artist-search-input {
    font-size: 1rem;
}

/* Artist Search Results */
.artist-search-container {
    position: relative;
}

.artist-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
}

.artist-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 56px; /* Touch target */
}

.artist-search-result:hover {
    background: #f9f9f9;
}

.artist-search-result-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.artist-search-result-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Animated Loading Dots */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading-dots .dot {
    width: 8px;
    height: 8px;
    background: #1DB954;
    border-radius: 50%;
    animation: loadingPulse 1.4s ease-in-out infinite;
}

.loading-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingPulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading state for recommendations section */
.recommendations-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}

.recommendations-loading .loading-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.recommendations-loading .loading-text {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.recommendations-loading .loading-subtext {
    font-size: 0.875rem;
    color: #888;
}

.recommendations-loading .loading-dots-container {
    margin-top: 1rem;
}

/* Recommendations */
.recommendations-header {
    text-align: center;
    margin-bottom: 1rem;
}

.recommendations-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.recommendations-count {
    color: #1DB954;
}

.recommendations-subtitle {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.recommendations-guarantee {
    font-size: 0.75rem;
    color: #888;
    margin: 0.5rem 0 0 0;
}

/* Bulk Selection Controls - Compact inline pills */
.bulk-selection-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding: 0.25rem 0; /* Padding to prevent box-shadow clipping on active pills */
}

.bulk-label {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-right: 0.25rem;
}

.btn-bulk-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 32px;
    white-space: nowrap;
}

.btn-bulk-pill:hover {
    background: #1DB954;
    color: white;
    border-color: #1DB954;
}

.btn-bulk-pill:active {
    transform: scale(0.96);
}

/* Color-coded tier buttons */
.btn-bulk-pill.btn-bulk-high {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.btn-bulk-pill.btn-bulk-high:hover {
    background: #155724;
    color: white;
    border-color: #155724;
}

.btn-bulk-pill.btn-bulk-medium {
    background: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.btn-bulk-pill.btn-bulk-medium:hover {
    background: #856404;
    color: white;
    border-color: #856404;
}

.btn-bulk-pill.btn-bulk-exploratory {
    background: #e8f4fd;
    border-color: #b8daff;
    color: #004085;
}

.btn-bulk-pill.btn-bulk-exploratory:hover {
    background: #004085;
    color: white;
    border-color: #004085;
}

/* Active state for selected tier/boost */
.btn-bulk-pill.active {
    background: #1DB954 !important;
    color: white !important;
    border-color: #1DB954 !important;
    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.3);
}

/* Boost pills - unified styling */
.btn-boost-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 32px;
    white-space: nowrap;
}

.btn-boost-pill:hover {
    border-color: #1DB954;
    color: #1DB954;
}

.btn-boost-pill:active {
    transform: scale(0.96);
}

.btn-boost-pill.active {
    background: #1DB954;
    color: white;
    border-color: #1DB954;
    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.3);
}

.btn-boost-pill:focus-visible {
    outline: 2px solid #1DB954;
    outline-offset: 2px;
}

.btn-boost-pill.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Boost pills wrapper and description */
.boost-pills-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.boost-description {
    font-size: 0.6875rem;
    color: #6b7280;
    margin-left: 0.5rem;
    align-self: center;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* === Bottom-of-list CTA (mobile-first) === */
/* Container class scopes children so they beat main.css bare-element globals. */
.recommendations-end-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 1.5rem 1rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.recommendations-end-cta .end-cta-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.recommendations-end-cta .end-cta-action {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border: 1px solid #1db954;
    border-radius: 10px;
    background: white;
    color: #1db954;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.recommendations-end-cta .end-cta-action:hover {
    background: #eafaf0;
}

.recommendations-end-cta .end-cta-browse {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #777;
    text-decoration: none;
}

.recommendations-end-cta .end-cta-browse:hover {
    color: #555;
    text-decoration: underline;
}

/* === Compact playlist card (mobile-first row layout) === */
.browse-playlist-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.browse-playlist-card:hover {
    border-color: #1db954;
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.08);
}

.browse-playlist-card.selected {
    border-color: #1DB954;
    background: #f0fdf4;
}

/* Always horizontal: thumbnail left, info right. Reclaims ~130px+ vertical
   per card on mobile vs the old image-on-top pattern. */
.browse-card-inner {
    padding: 12px;
    padding-right: 40px; /* room for the absolute checkbox */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.browse-checkbox {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.browse-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.browse-playlist-image {
    width: 64px;
    flex-shrink: 0;
}

.browse-playlist-image img {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.browse-playlist-info {
    flex: 1;
    min-width: 0; /* lets text shrink/wrap inside flex */
}

/* Name + match badge sit together at the top of the card. The badge wraps
   below the name on narrow widths if the name is long, but on most widths
   they fit inline. Keeps the footer focused on cost + More. */
.browse-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    /* leave room on the right so content doesn't run into the absolute checkbox */
    padding-right: 4px;
}

.browse-playlist-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
    overflow-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.browse-name-row .actively-growing-badge {
    flex: 0 0 auto;
}

.browse-curator-line {
    font-size: 13px;
    color: #555;
    margin: 3px 0 0 0;
    line-height: 1.4;
}

.browse-curator-line .dot-sep {
    color: #c8c8c8;
    margin: 0 4px;
}

.browse-stats-line {
    margin-top: 6px;
    font-size: 12.5px;
    color: #5f6368;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
}

.browse-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.browse-stat i {
    font-size: 11px;
    opacity: 0.7;
}

/* Desktop-only stats (engagement %, track count). Mobile keeps the row
   focused on the two decisional signals — streams and saves. Tablet+ has
   the horizontal real estate to add the qualifying detail. */
.browse-stat-desktop {
    display: none;
}

@media (min-width: 600px) {
    .browse-stat-desktop {
        display: inline-flex;
    }
}

/* Mobile: tighter stats line so three chips (placement rate, streams, saves)
   hold one row at 390px — three-line stat stacks killed card skimmability. */
@media (max-width: 599.98px) {
    .browse-stats-line {
        font-size: 12px;
        column-gap: 10px;
    }
}


.browse-card-footer {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

/* Match score badge */
.recommendation-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #f0f0f0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.recommendation-badge.match-score.high {
    background: #d4edda;
    color: #155724;
}

.recommendation-badge.match-score.medium {
    background: #fff3cd;
    color: #856404;
}

.recommendation-badge.match-score.low {
    background: #f1f1f1;
    color: #5a5a5a;
}

.actively-growing-badge {
    color: #10b981;
    font-size: 0.85rem;
    cursor: default;
}

.recommendation-cost {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
}

.browse-spotify-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1db954;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.15s ease, transform 0.15s ease;
    width: fit-content;
    margin-top: 8px;
}

.browse-spotify-link:hover {
    background: #1aa34a;
    transform: translateY(-1px);
}

.browse-spotify-link i {
    font-size: 13px;
}

/* Tablet+: a touch more breathing room and a slightly larger thumbnail. */
@media (min-width: 600px) {
    .browse-card-inner {
        padding: 14px;
        padding-right: 44px;
        gap: 14px;
    }

    .browse-checkbox {
        top: 14px;
        right: 14px;
    }

    .browse-playlist-image {
        width: 80px;
    }

    .browse-playlist-image img {
        width: 80px;
        height: 80px;
    }

    .browse-playlist-name {
        font-size: 16px;
    }

    /* On desktop the name grows and pushes the badges to the right edge. Put
       the match pill last so it (not the small growth leaf) sits beside the
       checkbox — the leaf tucks to its left instead of jamming the corner.
       Mobile keeps DOM order (name wraps, badges sit together on the left). */
    .browse-name-row .recommendation-badge.match-score {
        order: 1;
    }
}

/* "More" toggle — stays put in the footer on click. The body lives as a
   sibling of the footer (see .match-details-body) so opening it doesn't
   reflow the button to a new line. */
.more-toggle {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #1db954;
    cursor: pointer;
    user-select: none;
}

.more-toggle:hover {
    color: #1aa34a;
}

.more-toggle .more-chevron {
    font-size: 9px;
    margin-left: 2px;
}

.match-details-body {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.match-details-body[hidden] {
    display: none;
}

/* Divider between personalized matches and popular top-up playlists.
   Renders only when results are mixed (i.e., we found some matches but
   topped up to reach a comfortable count). The all-exploratory case
   uses its own callout above the list. */
.recommendations-separator {
    margin: 14px 4px 8px;
    text-align: center;
    color: #8a8f96;
    font-size: 12.5px;
    font-weight: 500;
    position: relative;
}

.recommendations-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ececec;
}

.recommendations-separator-text {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0 12px;
}

.match-score-detail {
    margin-top: 8px;
    font-size: 11.5px;
    color: #999;
}

.more-curator-meta {
    margin-bottom: 6px;
    font-size: 12.5px;
    color: #444;
    font-weight: 500;
}

.more-curator-meta .dot-sep {
    color: #c8c8c8;
    margin: 0 6px;
    font-weight: 400;
}

.more-meta {
    margin-top: 6px;
    font-size: 12.5px;
    color: #5f6368;
}

.more-meta .dot-sep {
    color: #c8c8c8;
    margin: 0 6px;
}

/* On tablet+, engagement % and tracks count are visible on the card itself
   (.browse-stat-desktop). Hide their duplicate inside "More" so the
   expansion doesn't show the same numbers twice. Same 600px breakpoint
   used to reveal the desktop-only stats above. */
@media (min-width: 600px) {
    .more-meta {
        display: none;
    }
}

.more-provenance {
    margin-top: 4px;
    font-size: 11.5px;
    color: #8a8f96;
    font-style: italic;
}

.match-reason-list {
    margin: 0.5rem 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: #666;
}

.match-score-summary {
    margin: 0.5rem 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #495057;
}

.match-score-summary strong {
    color: #1DB954;
    font-weight: 600;
}

.match-points {
    color: #1DB954;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.match-reason-list li {
    padding: 0.25rem 0;
}

/* Multiplier penalty styling (red for health, curator, size, and the
   evidence-based truth-in-advertising/relationship signals). */
.health-penalty .match-points,
.curator-penalty .match-points,
.size-penalty .match-points,
.over-reporter-penalty .match-points,
.dead-end-penalty .match-points {
    color: #dc3545;
}

/* Multiplier boost styling */
.health-boost .match-points {
    color: #1DB954;
}

.curator-boost .match-points {
    color: #f59e0b;
}

/* Stream boost - purple/blue to indicate user preference vs inherent quality */
.stream-boost .match-points {
    color: #8b5cf6;
}

.stream-penalty .match-points {
    color: #dc3545;
}

/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid #e0e0e0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    /* Mobile-first: account for browser toolbar (~44px) + safe area */
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px) + 44px);
}

/* iOS soft-keyboard guard: position:fixed anchors to the layout viewport,
   which stays full-height behind the keyboard, so this bottom bar drifts
   mid-screen when the keyboard is up and the user scrolls. Hide it while
   typing — the count/cost don't change from searching. keyboard-inset.js sets
   the body class; !important beats the inline display:block updateFooter sets.
   Inert on desktop/Android (the class is only added when the visual viewport
   actually shrinks for a soft keyboard). */
body.mn-keyboard-open .sticky-footer {
    display: none !important;
}

.sticky-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-summary {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.footer-separator {
    color: #ccc;
    margin: 0 0.25rem;
}

.footer-cost {
    color: #1DB954;
}

/* Footer left section (summary + nudge) */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-guarantee {
    font-size: 0.75rem;
    color: #888;
}

/* Calibration stat under the cost summary - always shown when footer is visible.
   Desktop: spans flow inline as one sentence. Mobile: stack into two lines (see media query below). */
.footer-encouragement {
    font-size: 0.85rem;
    color: #1DB954;
    font-weight: 500;
}

/* Discount badge in footer */
.discount-badge {
    background: #d4edda;
    color: #28a745;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
}

/* Mobile footer - stack vertically */
@media (max-width: 480px) {
    /* Note: .sticky-footer padding uses base rule (mobile-first with 44px toolbar buffer) */

    .sticky-footer-content {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .footer-left {
        align-items: center;
        text-align: center;
    }

    .footer-summary {
        text-align: center;
        font-size: 0.9rem;
    }

    .footer-encouragement {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        line-height: 1.35;
    }

    .btn-submit {
        width: 100%;
        padding: 0.875rem 1rem;
        min-height: 48px; /* Touch target minimum */
        touch-action: manipulation; /* Prevent double-tap zoom */
    }
}

/* Tablet+: reduce footer padding, no browser toolbar buffer needed */
@media (min-width: 641px) {
    .sticky-footer {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Disabled button state */
.btn-submit.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animate discount appearing */
@keyframes discountPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.discount-badge.animate {
    animation: discountPop 0.3s ease-out;
}

.auto-submit-container .btn-submit {
    flex-shrink: 0;
    padding: 0.875rem 1.5rem;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0; /* Modern shorthand for top/right/bottom/left: 0 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: contain; /* Prevent scroll chaining to body */
    /* Mobile-first: account for browser chrome (URL bar + bottom nav) */
    padding: max(0.75rem, env(safe-area-inset-top, 0px))
             0.75rem
             calc(0.75rem + env(safe-area-inset-bottom, 0px) + 50px)
             0.75rem;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    /* Viewport unit fallback chain */
    max-height: 80vh;   /* Fallback for older browsers */
    max-height: 80dvh;  /* Dynamic viewport - best for mobile */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain; /* Prevent scroll chaining */
    -webkit-overflow-scrolling: touch; /* Smooth iOS momentum scrolling */
    animation: slideUp 0.3s ease-out;
}

/* Prevent children from causing overflow */
.modal-content > * {
    max-width: 100%;
    box-sizing: border-box;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: more conservative max-height */
@media (max-width: 480px) {
    /* Note: .modal padding uses base rule (mobile-first with 50px toolbar buffer) */

    .modal-content {
        max-height: 75dvh; /* More conservative on small screens */
        border-radius: 12px;
        padding: 1rem;
        margin: 0;
    }
}

/* Tablet+: reduce modal padding, no browser toolbar buffer */
@media (min-width: 641px) {
    .modal {
        padding: 1rem;
    }
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.modal-track-info {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Compact track header variant */
.modal-track-info.modal-track-compact {
    padding: 0;
    background: transparent;
    border-radius: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0.75rem;
    align-items: center;
}

/* Text container in compact header needs flex overflow handling */
.modal-track-compact > div {
    flex: 1;
    min-width: 0; /* Required for text truncation in flex children */
    overflow: hidden;
}

.modal-track-compact .modal-track-artwork {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.modal-track-compact .modal-track-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.125rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1a1a;
}

.modal-track-compact .modal-track-artists {
    font-size: 0.8125rem;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-track-artwork {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.modal-track-name {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.modal-track-artists {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.modal-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Playlist header in cost breakdown */
.modal-summary .playlist-header {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-summary .playlist-count {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1DB954;
    line-height: 1;
}

.modal-summary .playlist-label {
    font-size: 1.125rem;
    color: #374151;
    font-weight: 500;
}

.modal-summary-text,
.modal-cost-text {
    font-size: 1rem;
    margin: 0.5rem 0;
}

.modal-info-box {
    background: #f0f7ff;
    border: 1px solid #d0e4ff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.modal-info-box p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #333;
}

.modal-message-section {
    margin-bottom: 1.5rem;
}

.modal-message-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.modal-message-label i {
    margin-right: 0.25rem;
    color: #1DB954;
}

.modal-message-input {
    width: 100%;
    padding: 0.75rem;
    /* 16px floor for iOS auto-zoom prevention — see .artist-search-input. */
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.modal-message-input:focus {
    outline: none;
    border-color: #1DB954;
}

.modal-message-hint {
    text-align: right;
    font-size: 0.75rem;
    color: #999;
    margin: 0.25rem 0 0 0;
}

/* Cost Breakdown (Stripe-style) */
.cost-breakdown {
    margin: 1rem 0;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #333;
}

.breakdown-header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.breakdown-value {
    font-weight: 500;
    text-align: right;
}

.balance-deduction {
    color: #1DB954;
}

.balance-deduction .breakdown-value {
    color: #1DB954;
}

/* Discount row in modal */
.discount-row {
    color: #28a745;
}

.discount-row .breakdown-value {
    color: #28a745;
}

.discount-value {
    font-weight: 600;
}

/* Validation warning for removed playlists */
.validation-warning {
    background: #fff4e6;
    border: 1px solid #ffd699;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.validation-warning strong {
    color: #856404;
    display: block;
    margin-bottom: 0.5rem;
}

.validation-warning ul {
    margin: 0;
    padding-left: 1.25rem;
}

.validation-warning li {
    color: #666;
    padding: 0.125rem 0;
}

.breakdown-divider {
    border-top: 1px solid #e0e0e0;
    margin: 0.75rem 0 0.5rem 0;
}

.breakdown-section-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.breakdown-total {
    padding-top: 0.5rem;
    font-size: 1rem;
}

.breakdown-total strong {
    font-weight: 600;
}

/* Balance note showing remaining tokens */
.balance-note {
    font-size: 0.8rem;
    color: #888;
    font-weight: 400;
}

/* Purchase line styling */
.purchase-line {
    color: #333;
}

/* Fully covered by balance state */
.covered-by-balance {
    color: #1DB954;
}

/* Mobile optimization */
@media (max-width: 640px) {
    .breakdown-row {
        font-size: 0.8125rem;
    }

    .breakdown-total {
        font-size: 0.9375rem;
    }

    /* Boost controls - wrap on mobile for better UX */
    .bulk-selection-controls {
        flex-wrap: wrap;
        overflow-x: visible;
        padding: 0.25rem 0;
    }

    .btn-boost-pill,
    .btn-bulk-pill {
        flex-shrink: 0;
        font-size: 0.6875rem;
        padding: 0.3rem 0.6rem;
    }

    /* Ensure box-shadow on active pill isn't clipped */
    .btn-boost-pill.active {
        position: relative;
        z-index: 1;
    }

    /* Description on its own line on mobile */
    .boost-description {
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/* Mobile modal compactness */
@media (max-width: 480px) {
    /* Reduce playlist count header size */
    .modal-summary .playlist-count {
        font-size: 2rem;
    }

    .modal-summary .playlist-label {
        font-size: 1rem;
    }

    /* Reduce padding/margins in modal */
    .modal-summary {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* Smaller playlist list on mobile */
    .modal-playlist-list {
        max-height: 120px;
    }

    /* Compact editorial addon */
    .modal-content .editorial-addon,
    .modal-content #editorial-addon-section {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* Compact message toggle */
    .modal-message-toggle {
        padding: 0.5rem 0.75rem;
    }

    /* Note: .modal-actions mobile styling is in the main .modal-actions section below */
}

.modal-removed-notification {
    background: #fff4e6;
    border: 1px solid #ffd699;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.modal-removed-notification p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #333;
}

.modal-removed-notification ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #666;
}

.modal-removed-notification li {
    margin: 0.25rem 0;
}

/* Second-song scope note: informational, not a warning — these playlists
   stay in the pitch, they just go out single-song */
.modal-song2-notification {
    background: #f0f6ff;
    border: 1px solid #c2d9ff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.modal-song2-notification p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #333;
}

.modal-song2-notification ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #666;
}

.modal-song2-notification li {
    margin: 0.25rem 0;
}

/* "5 of 8 playlists" scope on the Second song receipt line */
.second-song-scope {
    color: #888;
    font-weight: 400;
    font-size: 0.85em;
}

/* Collapsible Message Section */
.modal-message-details {
    margin-bottom: 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.modal-message-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #555;
    transition: background 0.15s ease;
    list-style: none;
    border-radius: 8px;
}

.modal-message-toggle::-webkit-details-marker {
    display: none;
}

.modal-message-toggle:hover {
    background: #f8f8f8;
}

.modal-message-toggle i {
    color: #888;
    font-size: 0.875rem;
}

.modal-message-toggle span {
    flex: 1;
}

.modal-message-toggle .toggle-chevron {
    font-size: 0.75rem;
    color: #999;
    transition: transform 0.2s ease;
}

.modal-message-details[open] .modal-message-toggle .toggle-chevron {
    transform: rotate(180deg);
}

.modal-message-details[open] .modal-message-toggle {
    border-bottom: 1px solid #e5e5e5;
    border-radius: 8px 8px 0 0;
}

.modal-message-details .modal-message-section {
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 0;
}

/* Collapsible Playlist List */
.modal-playlist-details {
    margin-bottom: 1rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.modal-details-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #555;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
    border-radius: 8px;
}

.modal-details-toggle::-webkit-details-marker {
    display: none;
}

.modal-details-toggle:hover {
    background: #f8f8f8;
}

.modal-details-toggle span {
    flex: 1;
}

.modal-details-toggle .toggle-chevron {
    font-size: 0.75rem;
    color: #999;
    transition: transform 0.2s ease;
}

.modal-playlist-details[open] .modal-details-toggle .toggle-chevron {
    transform: rotate(180deg);
}

.modal-playlist-details[open] .modal-details-toggle {
    border-bottom: 1px solid #e5e5e5;
    border-radius: 8px 8px 0 0;
}

.modal-playlist-list {
    padding: 0.5rem 1rem 0.75rem;
    font-size: 0.8125rem;
    max-height: 200px;
    overflow-y: auto;
}

.modal-playlist-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.modal-playlist-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.modal-actions {
    margin-top: 1rem;
}

.modal-actions .btn-full,
.modal-actions .btn {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    box-sizing: border-box;
    min-height: 48px; /* Touch target minimum */
    touch-action: manipulation; /* Prevent double-tap zoom */
}

/* Editorial Add-On Highlight in Modal */
.modal-content .editorial-addon,
.modal-content #editorial-addon-section {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.04) 0%, rgba(29, 185, 84, 0.08) 100%);
    border: 1px solid rgba(29, 185, 84, 0.2);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Empty State - Actionable guidance */
.empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #f0fdf4;
    border: 2px dashed #86efac;
    border-radius: 16px;
    margin: 1rem 0;
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
}

.empty-state-text {
    font-size: 0.9375rem;
    color: #4b5563;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state .btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}


/* Modal Error State */
.modal-error-state {
    text-align: center;
    padding: 2rem 1.5rem;
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.modal-error-state .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #333;
}

.modal-error-state .modal-subtitle {
    font-size: 0.9375rem;
    color: #666;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.error-list {
    text-align: left;
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.error-list li {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #555;
    line-height: 1.5;
}

.error-list strong {
    color: #333;
}

/* ===== TABLET+ STYLES (640px+) ===== */
@media (min-width: 640px) {
    .auto-submit-container:not(.logged-out) {
        /* Tablet+: standard bottom padding, no extra browser toolbar buffer */
        padding: 0 1.5rem 120px 1.5rem;
    }

    .auto-submit-container:not(.logged-out) .step-track {
        min-height: calc(70vh - 100px);
        padding: 2rem;
        justify-content: center; /* Tablet+: centered is fine, no keyboard issues */
    }

    .auto-submit-container.track-selected .step-track {
        min-height: auto;
    }

    .auto-submit-container:not(.logged-out) .step-title {
        font-size: 2.25rem;
    }

    .auto-submit-container:not(.logged-out) .step-description {
        font-size: 1.125rem;
        max-width: 400px;
    }

    .auto-submit-container:not(.logged-out) .input-group {
        max-width: 584px; /* Google's search box width */
    }

    .auto-submit-container:not(.logged-out) .spotify-url-input {
        font-size: 1.125rem;
        padding: 1.25rem 1.5rem 1.25rem 3.5rem;
        min-height: 64px;
    }

    .input-icon {
        left: 1.5rem;
    }

    .recommendations-title {
        font-size: 1.5rem;
    }
}

/* ===== DESKTOP STYLES (1024px+) ===== */
@media (min-width: 1024px) {
    .auto-submit-container:not(.logged-out) {
        padding: 0 2rem 120px 2rem;
    }

    .auto-submit-container:not(.logged-out) .step-track {
        min-height: calc(60vh - 100px);
    }

    .auto-submit-container.track-selected .step-track {
        min-height: auto;
    }

    .auto-submit-container:not(.logged-out) .step-title {
        font-size: 2.5rem;
    }

    .auto-submit-container:not(.logged-out) .input-group {
        max-width: 650px;
    }

    .track-artwork {
        width: 100px;
        height: 100px;
    }

    .recommendations-title {
        font-size: 1.75rem;
    }
}

/* ===== SOCIAL PROOF SECTION ===== */
.home-social-proof {
    margin-top: 2.5rem;
    text-align: center;
    animation: fadeInUp 0.5s ease-out 0.5s both;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.home-social-proof.hidden {
    display: none;
}

/* Pill/badge design - single visual element */
.social-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(29, 185, 84, 0.08);
    border: 1px solid rgba(29, 185, 84, 0.15);
    border-radius: 100px;
    font-size: 0.8125rem;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-proof-pill .pill-stat {
    color: #1DB954;
    font-weight: 600;
}

.social-proof-pill .pill-sep {
    color: #ccc;
    margin: 0 0.125rem;
}

/* Recent Placements Label */
.recent-placements-label {
    font-size: 0.8125rem;
    color: #999;
    margin: 0;
    font-weight: 400;
}

/* Recent Placements Carousel */
.recent-placements {
    margin-top: 0.75rem;
    min-height: 2.5rem;
    position: relative;
}

.placement-item {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #666;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    visibility: hidden;
}

.placement-item.ready {
    visibility: visible;
}

.placement-item.active.ready {
    opacity: 1;
    transform: translateY(0);
}

.placement-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.placement-artist {
    color: #1DB954;
    font-weight: 500;
}

.placement-arrow {
    color: #ccc;
    margin: 0 0.125rem;
    flex-shrink: 0;
}

.placement-playlist {
    color: #888;
    font-style: italic;
}

/* Inline guarantee */
.hero-guarantee-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #555;
}

.guarantee-icon {
    color: #1DB954;
    flex-shrink: 0;
}

/* ===== HOW IT WORKS SECTION ===== */
.home-how-it-works {
    margin-top: 2rem;
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

/* Mobile: stack vertically, left-aligned */
.how-it-works-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 320px;
    margin: 0 auto;
}

.how-it-works-step {
    font-size: 0.9rem;
    color: #888;
}

.how-it-works-step--final {
    color: #555;
    margin-top: 0.25rem;
}

.how-it-works-arrow {
    display: none;
}

/* Tablet+: inline with arrows, centered */
@media (min-width: 640px) {
    .home-how-it-works {
        text-align: center;
    }

    .how-it-works-steps {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        max-width: none;
    }

    .how-it-works-step--final {
        margin-top: 0;
    }

    .how-it-works-arrow {
        display: inline;
        font-size: 0.85rem;
        color: #bbb;
    }
}

/* Tablet+ (640px+) */
@media (min-width: 640px) {
    .home-social-proof {
        margin-top: 2rem;
    }

    .home-how-it-works {
        margin-top: 2rem;
    }

    .social-proof-pill {
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem;
    }
}

/* ==============================================
   CONFIRMATION MODAL V2 - Streamlined Design
   ============================================== */

.modal-content-v2 {
    padding: 1.25rem;
    max-width: 420px;
}

/* Compact Track Header */
.modal-track-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 1rem;
}

.modal-track-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.modal-track-meta {
    min-width: 0;
    flex: 1;
}

.modal-content-v2 .modal-track-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.125rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-content-v2 .modal-track-artists {
    font-size: 0.8125rem;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Summary Section - Receipt Style */
.modal-summary-v2 {
    background: #fafafa;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
}

.summary-label {
    font-size: 0.875rem;
    color: #555;
}

.summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}

.summary-main {
    padding-bottom: 0.5rem;
}

.summary-main .summary-label {
    font-weight: 600;
    color: #333;
    font-size: 0.9375rem;
}

.summary-main .summary-value {
    font-size: 0.9375rem;
}

.summary-balance .balance-remaining {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
}

.summary-deduct {
    color: #1DB954 !important;
}

.summary-editorial .editorial-tier-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
}

.summary-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 0.5rem 0;
}

.summary-total {
    padding-top: 0.5rem;
}

.summary-total .summary-label {
    font-weight: 600;
    color: #333;
}

.summary-due {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

.summary-due.free {
    color: #1DB954 !important;
}


/* Collapsible Options */
.modal-options {
    margin-bottom: 1rem;
}

.modal-option-group {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.modal-option-group:last-child {
    margin-bottom: 0;
}

.modal-option-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #555;
    transition: background 0.15s ease;
    list-style: none;
}

.modal-option-toggle::-webkit-details-marker {
    display: none;
}

.modal-option-toggle:hover {
    background: #f8f8f8;
}

.modal-option-toggle i {
    color: #999;
    font-size: 0.875rem;
    width: 18px;
    text-align: center;
}

.modal-option-toggle span {
    flex: 1;
}

.modal-option-toggle .toggle-chevron {
    color: #999;
    transition: transform 0.2s ease;
}

.modal-option-group[open] .toggle-chevron {
    transform: rotate(180deg);
}

.modal-option-content {
    padding: 0 1rem 1rem;
    animation: slideDown 0.2s ease;
}

/* Message Input in V2 */
.modal-content-v2 .modal-message-input {
    /* Don't shrink below 16px — iOS auto-zooms <16px inputs on focus. The
       v2 modal's tighter look is preserved via padding/border instead. */
    font-size: 1rem;
    padding: 0.625rem 0.75rem;
    border-width: 1px;
    border-radius: 6px;
}

.modal-content-v2 .modal-message-hint {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
}

/* Editorial Add-On in V2 - ensure visibility */
.modal-content-v2 .editorial-addon {
    margin: 0.75rem 0;
}

/* Playlist List in V2 */
.modal-content-v2 .modal-playlist-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0;
}

.modal-content-v2 .modal-playlist-item {
    font-size: 0.8125rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.modal-content-v2 .modal-playlist-item:last-child {
    border-bottom: none;
}

/* Actions V2 */
.modal-actions-v2 {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-cancel {
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.btn-submit-now {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-submit-now:hover {
    background: #333;
}

.btn-submit-now:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-submit-now .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .modal-content-v2 {
        padding: 1rem;
    }

    .trust-badges {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .trust-badge {
        font-size: 0.625rem;
    }

    .modal-actions-v2 {
        flex-direction: column-reverse;
    }

    .btn-cancel {
        width: 100%;
        text-align: center;
    }

    .btn-submit-now {
        width: 100%;
    }
}

/* ---- Submission-terms acknowledgment (review, not guaranteed placement) ---- */
.submission-ack-note {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #666;
}
.submission-ack-label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #333;
}
.submission-ack-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0.12rem 0 0;
    flex-shrink: 0;
    cursor: pointer;
}
.submission-ack-label.submission-ack-error {
    border-color: #e0b4b4;
    background: #fdf3f3;
}


/* ============================================
   Two-song pitch order bump (FEATURE_MULTISONG_PITCH)
   Lives in the Submit & Pay confirmation modal, below the editorial add-on.
   ============================================ */
.modal-second-song {
    margin: 0.75rem 0;
}
.second-song-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px dashed #bbb;
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    min-height: 44px;
}
.second-song-offer:hover {
    border-color: #888;
}
.second-song-offer-main {
    font-size: 0.9375rem;
    font-weight: 650;
    color: #111;
}
.second-song-offer-price {
    color: #1a7f37;
    font-weight: 650;
}
.second-song-offer-hint {
    font-size: 0.8125rem;
    color: #666;
}
/* One container morphing through fill states: the offer is the dashed
   empty slot, and the search + attached states share the identical solid
   box (same radius/padding as the offer) so all three read as the same
   widget rather than three unrelated elements */
.second-song-search {
    position: relative;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fafafa;
}
.modal-second-song .second-song-search-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 0.9375rem;
}
.modal-second-song .track-search-results {
    max-height: 220px;
    overflow-y: auto;
}
/* Both non-offer states keep the container's identity: a persistent
   "Second Track" header, so the search bar and the attached card never
   float without context (they sit right under the editorial box, where an
   unlabeled track card is genuinely ambiguous) */
.second-song-state-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.second-song-state-title {
    font-weight: 650;
    font-size: 0.9375rem;
    color: #1a1a1a;
}

/* The results dropdown positions against its nearest relative ancestor;
   this wrapper keeps it flush under the input now that the outer search
   box carries padding */
.second-song-input-wrap {
    position: relative;
}

.second-song-cancel {
    background: none;
    border: none;
    color: #888;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    /* 44px touch target without inflating the header visually */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.25rem 0.6rem;
    margin: -0.65rem -0.4rem -0.65rem 0;
}

.second-song-cancel:hover {
    color: #1a1a1a;
}

.second-song-attached-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.second-song-attached-price,
.second-song-search-price {
    color: #1a7f37;
    font-weight: 650;
    font-size: 0.9rem;
    white-space: nowrap;
}

.second-song-attached {
    display: block;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fafafa;
}
.second-song-attached-art {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.second-song-attached-info {
    min-width: 0;
    flex: 1;
}
.second-song-attached-name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.second-song-attached-artists {
    margin: 0;
    font-size: 0.8125rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.second-song-remove {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.second-song-remove:hover {
    color: #111;
    background: #eee;
}

/* Subtotal row: separates the cost components above from the balance
   deduction and payment math below (two-song / editorial add-ons) */
.cost-breakdown .breakdown-subtotal {
    border-top: 1px solid #e8e8e8;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Deal chip on the second-song line: the percent off vs pitching the song
   to the same playlists on its own (computed per cart, varies by A/B arm) */
.breakdown-deal,
.second-song-offer-price .breakdown-deal {
    color: #1a7f37;
    font-weight: 500;
    font-size: 0.85em;
    white-space: nowrap;
}