/* Shared phone layout. Loaded last to override the legacy page/inline styles. */
.mobile-tab-bar, .mobile-model-picker { display: none; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
button, a, select, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 3px solid #4458d9; outline-offset: 3px; }
.new-price-reference { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.new-price-reference-label { width: 100%; font-size: 11px; font-weight: 500; color: #636775; }
.new-price-reference-amount { font-size: inherit; font-weight: 700; }
.new-price-reference-source { display: inline-flex; align-items: center; min-height: 44px; color: #4458d9; font-size: 11px; font-weight: 500; line-height: 1.4; text-decoration: underline; }
.new-price-reference-variant { flex-basis: 100%; font-size: 11px; font-weight: 400; line-height: 1.5; color: #636775; }
.new-price-reference-compact { margin: 0 0 8px; font-size: 13px; }
.new-price-reference-compact .new-price-reference-label { width: auto; font-size: 12px; }

@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    :root { --tab-height: 64px; --phone-gutter: 16px; --safe-bottom: env(safe-area-inset-bottom, 0px); }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: auto; }
    body { margin: 0; min-height: 100svh; padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + 20px); }
    img, video, canvas { max-width: 100%; }
    button, [role="button"], .custom-dropdown-selected, .custom-dropdown-option,
    .btn-primary, .btn-secondary, .modal-actions a, .menu-item, .criteria-chip {
        min-height: 44px !important; min-width: 44px;
    }
    input, select, textarea { font-size: 16px !important; max-width: 100%; }
    button, input, select, textarea { font-family: inherit; }
    button:active, .mobile-tab-bar a:active { opacity: .72; }
    button:disabled { opacity: .5; }
    h1, h2, h3, h4, p, .car-title, .spec-value, .user-info { overflow-wrap: anywhere; }

    /* Compact header and a persistent, safe-area-aware tab bar. */
    .nav { position: sticky; top: 0; z-index: 100; width: 100%; margin: 0 !important;
        padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)) !important;
        min-height: 60px; gap: 12px; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    .nav .logo { font-size: 20px; white-space: nowrap; flex-shrink: 0; min-height: 44px; }
    .nav .nav-links { gap: 0; min-width: 0; width: auto; }
    .nav .nav-links > a { display: none; }
    .auth-nav-container { min-width: 0 !important; }
    .auth-nav-signin-btn, .auth-nav-user-btn { padding: 8px 12px !important; margin: 0; }
    .auth-nav-user-btn #userName { max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .auth-nav-dropdown { max-width: calc(100vw - 32px); right: 0; }
    .auth-nav-dropdown-email { overflow-wrap: anywhere; }
    .mobile-tab-bar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: fixed;
        z-index: 300; inset: auto 0 0; min-height: calc(var(--tab-height) + var(--safe-bottom));
        padding: 4px max(8px, env(safe-area-inset-right,0px)) calc(4px + var(--safe-bottom)) max(8px,env(safe-area-inset-left,0px));
        background: rgba(255,255,255,.96); border-top: 1px solid #e4e5ed;
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
    .mobile-tab-bar a { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; color: #606371; text-decoration: none; font: 500 11px/1.2 -apple-system,BlinkMacSystemFont,sans-serif; border-radius: 12px; }
    .mobile-tab-bar svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-tab-bar a[aria-current="page"] { color: #4c57c9; background: #f0f1ff; font-weight: 700; }
    body[data-overlay-open] .mobile-tab-bar, body.keyboard-open .mobile-tab-bar { transform: translateY(120%); pointer-events: none; }

    /* Landing page. */
    .hero { padding: 28px 20px !important; gap: 24px; }
    .hero h1 { font-size: clamp(30px,8.5vw,42px) !important; line-height: 1.12; }
    .hero-buttons { display: flex; flex-direction: column; gap: 12px; }
    .hero-buttons a { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 16px; }
    .hero-images { min-width: 0; max-width: 100%; }
    .features { padding: 28px 16px !important; gap: 16px; }
    .feature-card { padding: 24px 20px; min-width: 0; }
    .stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; padding: 28px 16px !important; }
    .stat-number { font-size: 28px !important; }
    .cta-section { padding: 32px 20px !important; }
    .cta-section h2 { font-size: 28px !important; }

    /* Native iOS selects replace the custom dropdown popovers on phones. */
    .container, .container-wide { width: 100%; max-width: 100%; padding: 0 16px !important; margin: 16px auto !important; }
    .search-card { border-radius: 20px !important; padding: 16px !important; margin: 0 !important; }
    .search-card .dropdown-group { display: none; }
    .search-controls { display: flex !important; flex-direction: column; gap: 12px !important; }
    .mobile-model-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; }
    .mobile-model-picker label { min-width: 0; color: #646875; font-size: 12px; font-weight: 600; }
    .mobile-model-picker select { display: block; width: 100%; min-width: 0; height: 50px; margin-top: 6px; padding: 10px 8px;
        border: 1px solid #d9dce7; border-radius: 12px; background: #f7f8fc; color: #252736; }
    .mobile-model-picker select:disabled { opacity: .55; }
    .button-group, #analyseBtn { width: 100%; }
    #analyseBtn { height: 50px; border-radius: 13px; }

    /* Content is responsive rather than clipped at the edge of the phone. */
    #analyticsSection, #carListingsSection { width: 100%; margin: 16px 0 !important; padding: 0 16px !important; }
    #analyticsSection > .card, #carListingsSection > .card { padding: 16px !important; border-radius: 20px; min-width: 0; }
    .analytics-methodology { color: #6b6e7c; font-size: 12px; line-height: 1.5; margin-bottom: 16px; }
    .analytics-methodology summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #565b72; }
    .analytics-methodology summary::after { content: '+'; margin-left: auto; font-size: 20px; }
    .analytics-methodology[open] summary::after { content: '−'; }
    .analytics-toolbar { flex-wrap: wrap; gap: 12px; }
    .analytics-toolbar .analytics-title { flex: 1 1 100%; font-size: 24px !important; line-height: 1.2; }
    .analytics-toolbar-actions { margin-left: auto; }
    .icon-button, .heart-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
    .general-stats { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
    .stat-card { padding: 16px 10px !important; border-radius: 16px; min-width: 0; }
    .stat-card .stat-icon { font-size: 25px !important; margin-bottom: 8px; }
    .stat-card .stat-label { font-size: 10px !important; letter-spacing: .3px; }
    .stat-card .stat-value { font-size: clamp(21px,6vw,28px) !important; line-height: 1.2; margin: 8px 0; }
    .stat-card .stat-range { font-size: 11px !important; }
    .analytics-section { padding: 16px 0 !important; min-width: 0; margin: 0 !important; }
    .analytics-section h3 { font-size: 20px; }
    #depreciationSection { padding: 20px 16px !important; }
    .reference-price-grid { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
    .reference-price-grid > div { padding: 16px !important; min-width: 0; }
    .country-grid, .country-cards-grid, .similar-vehicles-grid { grid-template-columns: minmax(0,1fr) !important; min-width: 0; }
    .country-card { min-width: 0; max-width: 100%; padding: 20px 16px; }
    #countryAnalytics > div:first-child > div { grid-template-columns: minmax(0,1fr) !important; }
    #carDescription { text-align: left !important; font-size: 14px; }
    #pagination { display: flex; justify-content: flex-start; gap: 6px; overflow-x: auto; padding: 8px 0; }
    #pagination button { padding: 10px 12px; flex-shrink: 0; }
    .segment-tabs, .listing-tabs { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; justify-content: flex-start !important;
        gap: 8px; padding: 4px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .segment-tab, .listing-tab { flex-shrink: 0; white-space: nowrap; padding: 10px 14px !important; }
    .segments-title, .hero-headline { font-size: 26px !important; }
    .segments-section { padding: 20px 16px !important; }
    .analytics-grid { grid-template-columns: minmax(0,1fr) !important; }
    .analytics-card { min-width: 0 !important; max-width: 100% !important; }
    .listings-header { gap: 16px; }
    .listings-header h2 { font-size: 22px; }
    .sort-controls { width: 100%; }
    #sortDropdown { min-width: 0; width: 100%; }
    .car-list-item { min-width: 0; width: 100%; border-radius: 18px; }
    .car-image { height: 190px; width: 100%; }
    .car-depreciation-side { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin: 0; }
    .car-info h3 { font-size: 19px !important; }
    .car-info .spec-item { display: inline-block; margin: 4px 8px 0 0 !important; font-size: 12px; }

    /* Sheet-style details and sign-in. Dynamic viewport sizing follows Safari chrome. */
    .modal, .auth-modal, .lightbox { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; }
    #carDetailModal { z-index: 1200; overflow: auto; background: #fff; }
    #carDetailModal .modal-content { width: 100%; max-width: 100%; margin: 0; border-radius: 0; min-height: 100dvh;
        padding: calc(56px + env(safe-area-inset-top,0px)) 0 calc(80px + env(safe-area-inset-bottom,0px)); box-shadow: none; }
    .modal-close, .lightbox-close { position: fixed !important; top: calc(8px + env(safe-area-inset-top,0px)) !important;
        right: max(12px,env(safe-area-inset-right,0px)) !important; width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7ef; border-radius: 50%; background: rgba(255,255,255,.96); color: #333; font-size: 28px; z-index: 1250; }
    .modal-body { flex-direction: column; padding: 0 16px !important; gap: 20px; }
    .modal-images, .modal-info { width: 100%; min-width: 0; flex: auto; }
    .image-gallery { gap: 8px; }
    .gallery-image { height: 135px; }
    .modal-nav { position: fixed; top: auto; bottom: calc(12px + env(safe-area-inset-bottom,0px)); transform: none !important; z-index: 1250;
        min-width: 60px; min-height: 48px; border-radius: 14px; padding: 8px 20px; }
    .modal-nav-prev { left: max(16px, env(safe-area-inset-left,0px)); }
    .modal-nav-next { right: max(16px, env(safe-area-inset-right,0px)); }
    .modal-actions { flex-direction: column; gap: 10px; }
    .modal-actions > * { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 48px; }
    .listing-analytics .analytics-grid, .options-grid { grid-template-columns: minmax(0,1fr) !important; }
    .spec-value { min-width: 0; text-align: right; }
    .auth-modal { z-index: 1400; padding: max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px)); align-items: center; }
    .auth-modal-content { width: 100% !important; max-width: 440px; max-height: calc(100dvh - 32px); border-radius: 24px; }
    .auth-modal-header, .auth-modal-body, .auth-modal-footer { padding-left: 20px !important; padding-right: 20px !important; }
    .auth-input-group { flex-direction: column; }
    .auth-input, .auth-btn { width: 100%; min-height: 48px; }
    .auth-modal-close { width: 44px; height: 44px; z-index: 1; }

    /* Account sections behave like a segmented control, not a desktop sidebar. */
    .account-container { display: flex; flex-direction: column; width: 100%; padding: 16px !important; gap: 16px; margin: 0 !important; }
    .sidebar { width: 100% !important; min-width: 0; position: static; border-radius: 18px; }
    .sidebar-header { padding: 16px !important; }
    .sidebar-user { min-width: 0; }
    .sidebar-menu { display: flex; overflow-x: auto; gap: 6px; padding: 8px !important; }
    .sidebar-menu .menu-item { flex: 1 0 100px; width: auto; padding: 10px 8px !important; font-size: 12px; justify-content: center; }
    .sidebar-menu .menu-item svg { display: none; }
    .main-content { width: 100%; min-width: 0; }
    .content-card { padding: 20px 16px !important; border-radius: 18px; }
    .content-header h1 { font-size: 24px !important; }
    .search-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .search-item { min-width: 0; padding: 16px !important; }
    .content-header { flex-wrap: wrap; gap: 12px; }

    /* Phone discovery uses stable, tappable choices rather than moving targets. */
    .nebula-section { padding: 24px 16px !important; min-height: 0; }
    .nebula-title { font-size: 26px; line-height: 1.2; }
    .nebula-subtitle { font-size: 14px; }
    .nebula-sphere-container { width: 100%; height: auto !important; min-height: 0; overflow: visible; }
    .nebula-sphere { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; height: auto; padding-bottom: 24px; }
    .criterion { position: static !important; transform: none !important; font-size: 14px !important; padding: 12px 14px !important;
        display: inline-flex; align-items: center; min-height: 46px; border-radius: 14px; max-width: 100%; white-space: normal; }
    .criterion.selected { border-color: #3544ee; background: #eef0ff; }
    .btn-discover-central { position: sticky !important; top: 76px; transform: none !important; width: 100%; min-width: 0;
        height: 52px; padding: 12px !important; margin: 0 0 12px; border-radius: 14px; font-size: 16px !important; z-index: 80; order: -1; animation: none; }
    .criteria-footer { position: static; padding: 12px 16px; margin: 0 16px 20px; border-radius: 18px; }
    .criteria-footer-content { gap: 10px; }
    .criteria-chips { gap: 8px; }
    .criteria-chip { max-width: 100%; }
    .criteria-chip-remove { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }
    .results-grid { padding: 24px 16px !important; gap: 20px; grid-template-columns: minmax(0,1fr); }
    .car-card { min-width: 0; }
    .car-card .car-actions { flex-direction: column; }
    .car-card .car-action { width: 100%; min-height: 48px; }
    .results-header { padding: 20px 16px; }

    /* Limit notification stacking so it cannot blanket a small screen. */
    .toast-container, #toastContainer, .scrape-status-container { left: 12px !important; right: 12px !important; width: auto !important;
        bottom: calc(var(--tab-height) + var(--safe-bottom) + 12px) !important; max-width: none !important; pointer-events: none; }
    .toast-container > *, .scrape-status-container > * { pointer-events: auto; max-width: 100% !important; min-width: 0 !important; }
    #toastContainer > :not(:last-child) { display: none; }
    .scrape-status-toast { width: 100% !important; min-width: 0 !important; padding: 12px 16px; }
    .scrape-status-message, .toast-message { font-size: 13px; line-height: 1.4; }
    .toast { max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print { .mobile-tab-bar, .mobile-model-picker { display: none !important; } }
/* Stable discovery also honors Reduce Motion on larger screens. */
.discover-static .nebula-sphere-container { width: min(100%, 960px); min-height: 0; height: auto; overflow: visible; }
.discover-static .nebula-sphere { display: flex; flex-wrap: wrap; gap: 10px; height: auto; }
.discover-static .criterion { position: static; transform: none !important; display: inline-flex; align-items: center; min-height: 46px; }
.discover-static .btn-discover-central { position: sticky; top: 76px; transform: none; order: -1; width: 100%; animation: none; }
@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    body { overflow-x: clip; }
    #analyticsSection > .analytics-container { padding: 16px; }
    .analytics-grid.general-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; margin-bottom: 24px; }
    #dashboardSection, #analyticsCardsSection { width: 100%; padding: 16px !important; }
    .analytics-section > .analytics-grid { width: 100%; grid-template-columns: minmax(0,1fr) !important; }
    .segments-section, .segments-header, .segment-content-wrapper, .segment-content, .category-cards-grid { width: 100%; min-width: 0; max-width: 100%; }
    .category-cards-grid { grid-template-columns: minmax(0,1fr) !important; }
    #carDetailModal .modal-body { padding: 0 16px; flex-direction: column; }
    #carDetailModal .modal-nav { top: auto; bottom: calc(12px + env(safe-area-inset-bottom,0px)); min-height: 48px; height: 48px; }
    #carDetailModal .modal-close { width: 44px; height: 44px; }
    .auth-modal .auth-modal-content { max-height: calc(100dvh - 32px); }
    .auth-modal .auth-modal-header { padding-top: 52px; }
}
@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    .discover-page:has(.criteria-footer.visible) { padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + 100px); }
    .criteria-footer { position: fixed; bottom: calc(var(--tab-height) + var(--safe-bottom)); left: 0; right: 0; margin: 0; border-radius: 18px 18px 0 0; z-index: 200; }
    .criteria-footer-content { flex-wrap: nowrap; }
    .criteria-footer-label { display: none; }
    .criteria-chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-height: 54px; }
    .criteria-chip { flex-shrink: 0; font-size: 12px; }
    .btn-refine { flex-shrink: 0; }
    .hero { padding-top: 28px !important; }
    .hero-images .hero-image { height: 200px; }
    .hero-images .hero-image img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    .auth-modal { height: var(--visual-height, 100dvh); top: var(--visual-top, 0px); }
    .auth-modal .auth-modal-content { max-height: calc(var(--visual-height, 100dvh) - 24px); }
}
@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    .dashboard-section { width: 100%; padding: 16px !important; }
    .empty-state .primary-button { margin-top: 16px; padding: 12px 20px; border: 0; border-radius: 12px; background: #3544ee; color: #fff; font-weight: 600; }
}

@media (max-width: 900px) and (hover: none), (max-width: 767px) {
    .hero { margin: 0 auto !important; }
    .analytics-toolbar .analytics-title { flex: 1 1 120px; min-width: 0; }
    .analytics-heading-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #707486; letter-spacing: 0; }
    .analytics-toolbar-actions { flex: 0 0 auto; }
}