/* ═══ Design-token skin for the search app + listing-details worlds ═══

   These pages are styled with Tailwind's neutral palette (bg-white / text-gray-* / …).
   This layer, scoped to body.al-with-chrome (pages rendered with the site chrome), remaps
   that palette onto the design tokens _SiteChromeHead emits (--bg / --card / --ink /
   --accent). On a light design the mapping reproduces the original look almost exactly;
   on a dark design every surface follows the theme instead of staying white.

   Rules of the mapping:
   - Derived shades (borders, muted text, soft fills) are color-mix'es of --ink so they
     adapt to any theme. Solid "dark button" utilities (bg-gray-900) become ink-on-bg —
     identical on light designs, light-button-dark-text on dark ones.
   - Anything that sits ON A PHOTO is left alone: text-white, bg-black/*, bg-white/NN
     arrows keep their explicit colors (only fully-opaque surfaces are remapped).
   - Semantic colors (reds, greens, sold/status tags) are untouched.

   Specificity note: Tailwind CDN injects its <style> at runtime after this file, but every
   selector here carries body.al-with-chrome, so it outweighs the bare utility classes. */

body.al-with-chrome {
    --app-bg: var(--bg, #f9fafb);
    --app-card: var(--card, #ffffff);
    --app-ink: var(--ink, #111827);
    /* text ramp (gray-700/600 → 500 → 400 → 300) */
    --app-muted: color-mix(in srgb, var(--ink, #111827) 74%, transparent);
    --app-subtle: color-mix(in srgb, var(--ink, #111827) 58%, transparent);
    --app-faint: color-mix(in srgb, var(--ink, #111827) 42%, transparent);
    --app-ghost: color-mix(in srgb, var(--ink, #111827) 27%, transparent);
    /* border ramp (gray-100 → 200 → 300/400) */
    --app-line-soft: color-mix(in srgb, var(--ink, #111827) 9%, transparent);
    --app-line: color-mix(in srgb, var(--ink, #111827) 15%, transparent);
    --app-line-strong: color-mix(in srgb, var(--ink, #111827) 24%, transparent);
    /* fill ramp (gray-50 → 100 → 200…) — mixed over the card so fills sit naturally on it */
    --app-soft-2: color-mix(in srgb, var(--ink, #111827) 4%, var(--card, #fff));
    --app-soft: color-mix(in srgb, var(--ink, #111827) 7%, var(--card, #fff));
    --app-fill-2: color-mix(in srgb, var(--ink, #111827) 12%, var(--card, #fff));
    --app-fill-3: color-mix(in srgb, var(--ink, #111827) 24%, var(--card, #fff));
    --app-fill-4: color-mix(in srgb, var(--ink, #111827) 36%, var(--card, #fff));
    --app-fill-5: color-mix(in srgb, var(--ink, #111827) 48%, var(--card, #fff));
    --app-fill-6: color-mix(in srgb, var(--ink, #111827) 60%, var(--card, #fff));
    /* solid buttons (bg-gray-900 + text-white idiom) */
    --app-solid: var(--ink, #111827);
    --app-solid-hover: color-mix(in srgb, var(--ink, #111827) 86%, var(--bg, #fff));
    --app-solid-text: var(--bg, #ffffff);

    background-color: var(--app-bg);
    color: var(--app-ink);
}

/* ── Backgrounds ── */
body.al-with-chrome .bg-white { background-color: var(--app-card); }
body.al-with-chrome .hover\:bg-white:hover,
body.al-with-chrome .focus\:bg-white:focus { background-color: var(--app-card); }
body.al-with-chrome .bg-white\/80 { background-color: color-mix(in srgb, var(--app-card) 84%, transparent); }
body.al-with-chrome .bg-white\/90 { background-color: color-mix(in srgb, var(--app-card) 92%, transparent); }
body.al-with-chrome .bg-white\/95 { background-color: color-mix(in srgb, var(--app-card) 95%, transparent); }
body.al-with-chrome .bg-gray-50 { background-color: var(--app-soft-2); }
body.al-with-chrome .hover\:bg-gray-50:hover,
body.al-with-chrome .focus\:bg-gray-50:focus { background-color: var(--app-soft-2); }
body.al-with-chrome .bg-gray-100 { background-color: var(--app-soft); }
body.al-with-chrome .hover\:bg-gray-100:hover { background-color: var(--app-soft); }
body.al-with-chrome .bg-gray-200 { background-color: var(--app-fill-2); }
body.al-with-chrome .hover\:bg-gray-200:hover { background-color: var(--app-fill-2); }
body.al-with-chrome .bg-gray-300 { background-color: var(--app-fill-3); }
body.al-with-chrome .bg-gray-400 { background-color: var(--app-fill-4); }
body.al-with-chrome .bg-gray-500 { background-color: var(--app-fill-5); }
body.al-with-chrome .bg-gray-600 { background-color: var(--app-fill-6); }
/* Solid dark buttons / toasts / avatars: ink surface, bg-colored text (inverts cleanly) */
body.al-with-chrome .bg-gray-800,
body.al-with-chrome .bg-gray-900 { background-color: var(--app-solid); }
body.al-with-chrome .bg-gray-800.text-white,
body.al-with-chrome .bg-gray-900.text-white,
body.al-with-chrome .bg-gray-800 .text-white,
body.al-with-chrome .bg-gray-900 .text-white { color: var(--app-solid-text); }
body.al-with-chrome .hover\:bg-gray-800:hover { background-color: var(--app-solid-hover); }

/* ── Text ── */
body.al-with-chrome .text-gray-800,
body.al-with-chrome .text-gray-900,
body.al-with-chrome .hover\:text-gray-900:hover { color: var(--app-ink); }
body.al-with-chrome .text-gray-600,
body.al-with-chrome .text-gray-700,
body.al-with-chrome .hover\:text-gray-600:hover,
body.al-with-chrome .hover\:text-gray-700:hover { color: var(--app-muted); }
body.al-with-chrome .text-gray-500 { color: var(--app-subtle); }
body.al-with-chrome .text-gray-400 { color: var(--app-faint); }
body.al-with-chrome .text-gray-300 { color: var(--app-ghost); }
body.al-with-chrome .placeholder-gray-400::placeholder { color: var(--app-faint); }

/* ── Borders / dividers / rings ── */
body.al-with-chrome .border-gray-50,
body.al-with-chrome .border-gray-100 { border-color: var(--app-line-soft); }
body.al-with-chrome .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
body.al-with-chrome .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--app-line-soft); }
body.al-with-chrome .border-gray-200 { border-color: var(--app-line); }
body.al-with-chrome .border-gray-200\/80 { border-color: color-mix(in srgb, var(--ink, #111827) 12%, transparent); }
body.al-with-chrome .border-gray-300,
body.al-with-chrome .border-gray-400,
body.al-with-chrome .hover\:border-gray-400:hover,
body.al-with-chrome .focus\:border-gray-300:focus,
body.al-with-chrome .focus\:border-gray-400:focus { border-color: var(--app-line-strong); }
body.al-with-chrome .border-gray-900 { border-color: var(--app-solid); }
body.al-with-chrome .ring-gray-900 { --tw-ring-color: var(--app-solid); }
body.al-with-chrome .focus\:ring-gray-300:focus { --tw-ring-color: var(--app-line-strong); }

/* ── app.css companions (hardcoded neutrals themed on chromed pages) ── */
body.al-with-chrome .al-scrollbar::-webkit-scrollbar-thumb,
body.al-with-chrome .al-gallery-scroll::-webkit-scrollbar-thumb { background: var(--app-line-strong); }
body.al-with-chrome .al-scrollbar::-webkit-scrollbar-thumb:hover,
body.al-with-chrome .al-gallery-scroll::-webkit-scrollbar-thumb:hover { background: var(--app-faint); }
body.al-with-chrome .al-modal-scroll::-webkit-scrollbar-thumb { background: var(--app-line); }
body.al-with-chrome .al-gallery-scroll::-webkit-scrollbar-track { background: var(--app-soft-2); }
body.al-with-chrome .al-gallery-scroll { scrollbar-color: var(--app-line-strong) var(--app-soft-2); }
/* Description fade must fade INTO the card it covers, not into white */
body.al-with-chrome .al-desc-fade { background: linear-gradient(transparent, var(--app-card)); }
body.al-with-chrome .al-img-placeholder,
body.al-with-chrome .al-lazy-photo {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ink, #111827) 6%, var(--app-card)) 0%,
        color-mix(in srgb, var(--ink, #111827) 12%, var(--app-card)) 100%);
}
body.al-with-chrome .al-skeleton { background: var(--app-soft); }
body.al-with-chrome .al-tab-item { color: var(--app-subtle); }
body.al-with-chrome .al-tab-item:hover { color: var(--app-muted); }
body.al-with-chrome .al-tab-item--active { color: var(--app-ink); }
/* Accent chips/tiles: mix with the theme surfaces instead of hardcoded white/black */
body.al-with-chrome .al-accent-chip {
    background: color-mix(in srgb, var(--accent) 12%, var(--app-card));
    color: color-mix(in srgb, var(--accent) 65%, var(--app-ink));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--app-card));
}
body.al-with-chrome .al-accent-chip-icon { color: color-mix(in srgb, var(--accent) 60%, var(--app-ink)); }
body.al-with-chrome .al-accent-icon-tile { background: color-mix(in srgb, var(--accent) 12%, var(--app-card)); }