@import "tailwindcss";
/* All @import rules must precede @plugin/@source — a late @import is invalid
 * per the CSS spec and lightningcss (Tailwind v4) silently drops it. */
@import "./tours.css";
@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";
@source "../node_modules/streamdown/dist/*.js";

@custom-variant dark (&:where(.dark, .dark *));

/* Pushed page/panel content resolves responsive variants against its marked
 * width container. Everything else — notably body portals and fixed overlays
 * — keeps normal viewport media queries, so body never becomes a containing
 * block for fixed positioning. Widths match Tailwind's defaults. */
@custom-variant sm {
  @media (width >= 40rem) {
    &:where(:not([data-responsive-container] *)) {
      @slot;
    }
  }
  @container (width >= 40rem) {
    &:where([data-responsive-container] *) {
      @slot;
    }
  }
}
@custom-variant md {
  @media (width >= 48rem) {
    &:where(:not([data-responsive-container] *)) {
      @slot;
    }
  }
  @container (width >= 48rem) {
    &:where([data-responsive-container] *) {
      @slot;
    }
  }
}
@custom-variant lg {
  @media (width >= 64rem) {
    &:where(:not([data-responsive-container] *)) {
      @slot;
    }
  }
  @container (width >= 64rem) {
    &:where([data-responsive-container] *) {
      @slot;
    }
  }
}
@custom-variant xl {
  @media (width >= 80rem) {
    &:where(:not([data-responsive-container] *)) {
      @slot;
    }
  }
  @container (width >= 80rem) {
    &:where([data-responsive-container] *) {
      @slot;
    }
  }
}
@custom-variant 2xl {
  @media (width >= 96rem) {
    &:where(:not([data-responsive-container] *)) {
      @slot;
    }
  }
  @container (width >= 96rem) {
    &:where([data-responsive-container] *) {
      @slot;
    }
  }
}

/* Fonts are provided by next/font as CSS variables on <html>; `inline` avoids
 * emitting a circular --font-sans: var(--font-sans) declaration on :root. */
@theme inline {
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}

/* ===== LIGHT THEME (ROOT) ===== */
:root {
  /* Button Colors */
  --bg-button-primary: var(--color-emerald-300);
  --bg-button-primary-hover: var(--color-teal-200);
  --bg-button-primary-press: var(--color-emerald-400);
  --bg-button-secondary: var(--color-slate-950);
  --bg-button-secondary-press: var(--color-slate-800);
  --bg-button-tertiary: var(--color-blue-600);
  --bg-button-tertiary-hover: var(--color-blue-500);
  --bg-button-tertiary-active: var(--color-indigo-600);
  --bg-button-disabled: var(--color-neutral-300);

  /* Radar Map */
  --bg-radar-map: #b51c8033;
  --bg-radar-button: #b51c80;

  /* Neutral Map */
  --bg-neutral-map: var(--color-neutral-300);

  /* Input Colors */
  --bg-input-primary: var(--color-white);
  --border-input-primary: var(--color-slate-400);
  --border-input-primary-press: var(--color-slate-700);
  --border-input-primary-pressed: #a7f3d0;
  --border-input-primary-fill: var(--color-slate-500);

  /* Text Colors */
  --text-neutral-primary: var(--color-slate-950);
  --text-neutral-secondary: var(--color-zinc-800);
  --text-neutral-tertiary: var(--color-zinc-500);
  --text-error-primary: var(--color-red-600);
  --text-warning-primary: var(--color-orange-500);
  --text-success-primary: var(--color-green-600);

  /* Border Colors */
  --border-error-primary: var(--color-red-500);
  --border-neutral-primary: var(--color-neutral-200);
  --border-neutral-secondary: var(--color-slate-200);
  --border-neutral-tertiary: var(--color-slate-300);
  --border-tag-primary: var(--color-gray-400);
  --border-data-emphasis: rgba(0, 0, 0, 0.1);

  /* Background Colors */
  --bg-neutral-primary: #fdfdfd;
  --bg-neutral-secondary: var(--color-white);
  --bg-neutral-tertiary: #fbfdfd;
  --bg-tag-primary: var(--color-slate-50);
  --bg-pass-primary: var(--color-emerald-400);
  --bg-pass-secondary: var(--color-emerald-50);
  --bg-warning-primary: var(--color-orange-500);
  --bg-warning-secondary: var(--color-orange-50);
  --bg-fail-primary: var(--color-rose-500);
  --bg-fail-secondary: var(--color-rose-50);

  /* Data Background Colors */
  --bg-data-azure: var(--color-sky-400);
  --bg-data-kubernetes: var(--color-indigo-600);
  --bg-data-aws: var(--color-amber-500);
  --bg-data-gcp: var(--color-red-500);
  --bg-data-m365: var(--color-green-400);
  --bg-data-github: var(--color-slate-950);

  /* Severity Colors */
  --bg-data-critical: #ff006a;
  --bg-data-high: #f77852;
  --bg-data-medium: #fdd34f;
  --bg-data-low: #f5f3ce;
  --bg-data-info: #3c8dff;
  --bg-data-muted: var(--color-neutral-500);

  /* Chart Dots */
  --chart-dots: var(--color-neutral-200);

  /* Progress Bar */
  --shadow-progress-glow:
    0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary);

  /* App sidebar */
  --bg-sidebar-active: rgba(255, 255, 255, 0.78);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.55);
  --bg-sidebar-subitem-active: rgba(16, 185, 129, 0.1);
  --bg-sidebar-toggle: rgba(255, 255, 255, 0.4);
  --border-sidebar-active: rgba(15, 23, 42, 0.09);
  --border-sidebar-hover: rgba(15, 23, 42, 0.06);
  --border-sidebar-guide: rgba(15, 23, 42, 0.12);
  --border-sidebar-toggle: rgba(15, 23, 42, 0.08);
  --sidebar-active-bar: var(--color-emerald-400);
  --sidebar-active-icon: var(--color-emerald-600);
  --shadow-sidebar-active: 0 8px 24px rgba(15, 23, 42, 0.06);
  --gradient-sidebar-halo: radial-gradient(
    circle,
    rgba(46, 229, 155, 0.14) 0%,
    rgba(98, 223, 240, 0.06) 42%,
    transparent 72%
  );

  /* Lighthouse AI */
  --gradient-lighthouse: linear-gradient(96deg, #2ee59b 3.55%, #62dff0 98.85%);

  /* Cloud feature badge */
  --gradient-feature-cloud: linear-gradient(
    112deg,
    rgb(46, 229, 155) 3.5%,
    rgb(98, 223, 240) 98.8%
  );
  --bg-feature-new: var(--color-emerald-500);
  --text-feature-new: var(--color-white);
}

/* ===== DARK THEME =====
 * Editorial contrast tweaks: pure-black canvas, pure-white primary text,
 * and one tier brighter primary border for clearer element separation.
 */
.dark {
  /* Button Colors */
  --bg-button-primary: var(--color-emerald-300);
  --bg-button-primary-hover: var(--color-teal-200);
  --bg-button-primary-press: var(--color-emerald-400);
  --bg-button-secondary: var(--color-white);
  --bg-button-secondary-press: var(--color-emerald-100);
  --bg-button-tertiary: var(--color-blue-300);
  --bg-button-tertiary-hover: var(--color-blue-400);
  --bg-button-tertiary-active: var(--color-blue-600);
  --bg-button-disabled: var(--color-neutral-700);

  /* Neutral Map */
  --bg-neutral-map: var(--color-gray-800);

  /* Input Colors */
  --bg-input-primary: #111111;
  --border-input-primary: var(--color-zinc-700);
  --border-input-primary-press: var(--color-zinc-500);
  --border-input-primary-pressed: #a7f3d0;
  --border-input-primary-fill: var(--color-zinc-200);

  /* Text Colors */
  --text-neutral-primary: #ffffff;
  --text-neutral-secondary: var(--color-zinc-200);
  --text-neutral-tertiary: var(--color-zinc-400);
  --text-error-primary: var(--color-red-400);
  --text-warning-primary: var(--color-orange-400);
  --text-success-primary: var(--color-green-500);

  /* Border Colors */
  --border-error-primary: var(--color-red-400);
  --border-neutral-primary: var(--color-zinc-700);
  --border-neutral-secondary: var(--color-zinc-800);
  --border-neutral-tertiary: var(--color-zinc-700);
  --border-tag-primary: var(--color-slate-700);
  --border-data-emphasis: rgba(255, 255, 255, 0.14);

  /* Background Colors */
  --bg-neutral-primary: #000000;
  --bg-neutral-secondary: var(--color-stone-950);
  --bg-neutral-tertiary: #121110;
  --bg-tag-primary: var(--color-slate-950);
  --bg-pass-primary: var(--color-green-400);
  --bg-pass-secondary: var(--color-emerald-900);
  --bg-warning-primary: var(--color-orange-400);
  --bg-warning-secondary: var(--color-orange-900);
  --bg-fail-primary: var(--color-rose-500);
  --bg-fail-secondary: #432232;

  /* Data Background Colors */
  --bg-data-azure: var(--color-sky-400);
  --bg-data-kubernetes: var(--color-indigo-600);
  --bg-data-aws: var(--color-amber-500);
  --bg-data-gcp: var(--color-red-500);
  --bg-data-m365: var(--color-green-400);
  --bg-data-github: var(--color-neutral-100);

  /* Severity Colors */
  --bg-data-critical: #ff006a;
  --bg-data-high: #f77852;
  --bg-data-medium: #fec94d;
  --bg-data-low: #fdfbd4;
  --bg-data-info: #3c8dff;
  --bg-data-muted: var(--color-neutral-500);

  /* Chart Dots */
  --chart-dots: var(--text-neutral-primary);

  /* Progress Bar */
  --shadow-progress-glow:
    0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary);

  /* App sidebar */
  --bg-sidebar-active: rgba(255, 255, 255, 0.06);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.045);
  --bg-sidebar-subitem-active: rgba(46, 229, 155, 0.09);
  --bg-sidebar-toggle: rgba(255, 255, 255, 0.025);
  --border-sidebar-active: rgba(255, 255, 255, 0.11);
  --border-sidebar-hover: rgba(255, 255, 255, 0.07);
  --border-sidebar-guide: rgba(255, 255, 255, 0.1);
  --border-sidebar-toggle: rgba(255, 255, 255, 0.08);
  --sidebar-active-bar: var(--color-emerald-300);
  --sidebar-active-icon: var(--color-emerald-300);
  --shadow-sidebar-active: 0 10px 28px rgba(0, 0, 0, 0.22);
  --gradient-sidebar-halo: radial-gradient(
    circle,
    rgba(46, 229, 155, 0.16) 0%,
    rgba(98, 223, 240, 0.07) 40%,
    transparent 72%
  );
}

/* ===== TAILWIND THEME MAPPINGS ===== */
@theme {
  /* Data Background Colors */
  --color-bg-data-azure: var(--bg-data-azure);
  --color-bg-data-kubernetes: var(--bg-data-kubernetes);
  --color-bg-data-aws: var(--bg-data-aws);
  --color-bg-data-gcp: var(--bg-data-gcp);
  --color-bg-data-m365: var(--bg-data-m365);
  --color-bg-data-github: var(--bg-data-github);
  --color-bg-data-critical: var(--bg-data-critical);
  --color-bg-data-high: var(--bg-data-high);
  --color-bg-data-medium: var(--bg-data-medium);
  --color-bg-data-low: var(--bg-data-low);
  --color-bg-data-info: var(--bg-data-info);
  --color-bg-data-muted: var(--bg-data-muted);

  /* Button Colors */
  --color-button-primary: var(--bg-button-primary);
  --color-button-primary-hover: var(--bg-button-primary-hover);
  --color-button-primary-press: var(--bg-button-primary-press);
  --color-button-secondary: var(--bg-button-secondary);
  --color-button-secondary-press: var(--bg-button-secondary-press);
  --color-button-tertiary: var(--bg-button-tertiary);
  --color-button-tertiary-hover: var(--bg-button-tertiary-hover);
  --color-button-tertiary-active: var(--bg-button-tertiary-active);
  --color-button-disabled: var(--bg-button-disabled);

  /* Input Colors */
  --color-bg-input-primary: var(--bg-input-primary);
  --color-border-input-primary: var(--border-input-primary);
  --color-border-input-primary-press: var(--border-input-primary-press);
  --color-border-input-primary-pressed: var(--border-input-primary-pressed);
  --color-border-input-primary-fill: var(--border-input-primary-fill);

  /* Neutral Map Colors */
  --color-bg-neutral-map: var(--bg-neutral-map);

  /* Success Colors */
  --color-text-success: var(--text-success-primary);

  /* Border Colors */
  --color-border-error: var(--border-error-primary);
  --color-border-neutral-primary: var(--border-neutral-primary);
  --color-border-neutral-secondary: var(--border-neutral-secondary);
  --color-border-neutral-tertiary: var(--border-neutral-tertiary);
  --color-border-tag: var(--border-tag-primary);
  --color-border-data-emphasis: var(--border-data-emphasis);

  /* Text Colors */
  --color-text-neutral-primary: var(--text-neutral-primary);
  --color-text-neutral-secondary: var(--text-neutral-secondary);
  --color-text-neutral-tertiary: var(--text-neutral-tertiary);
  --color-text-error-primary: var(--text-error-primary);
  --color-text-warning-primary: var(--text-warning-primary);
  --color-text-success-primary: var(--text-success-primary);

  /* Background Colors */
  --color-bg-neutral-primary: var(--bg-neutral-primary);
  --color-bg-neutral-secondary: var(--bg-neutral-secondary);
  --color-bg-neutral-tertiary: var(--bg-neutral-tertiary);
  --color-bg-tag: var(--bg-tag-primary);
  --color-bg-pass: var(--bg-pass-primary);
  --color-bg-pass-secondary: var(--bg-pass-secondary);
  --color-bg-warning: var(--bg-warning-primary);
  --color-bg-warning-secondary: var(--bg-warning-secondary);
  --color-bg-fail: var(--bg-fail-primary);
  --color-bg-fail-secondary: var(--bg-fail-secondary);
  --color-bg-feature-new: var(--bg-feature-new);
  --color-text-feature-new: var(--text-feature-new);

  /* App sidebar */
  --color-bg-sidebar-active: var(--bg-sidebar-active);
  --color-bg-sidebar-hover: var(--bg-sidebar-hover);
  --color-bg-sidebar-subitem-active: var(--bg-sidebar-subitem-active);
  --color-bg-sidebar-toggle: var(--bg-sidebar-toggle);
  --color-border-sidebar-active: var(--border-sidebar-active);
  --color-border-sidebar-hover: var(--border-sidebar-hover);
  --color-border-sidebar-guide: var(--border-sidebar-guide);
  --color-border-sidebar-toggle: var(--border-sidebar-toggle);
  --color-sidebar-active-bar: var(--sidebar-active-bar);
  --color-sidebar-active-icon: var(--sidebar-active-icon);

  /* Shadows */
  --shadow-progress-glow: var(--shadow-progress-glow);
  --shadow-sidebar-active: var(--shadow-sidebar-active);

  /* Background images */
  --background-image-feature-cloud: var(--gradient-feature-cloud);

  /* Breakpoints */
  --breakpoint-3xl: 1920px;

  /* Animations */
  --animate-fade-in: fade-in 200ms ease-out forwards;
  --animate-collapsible-down: collapsible-down 0.2s ease-out;
  --animate-collapsible-up: collapsible-up 0.2s ease-out;

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes collapsible-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }
}

/* Used from plain CSS (`.animate-download-icon`), so it must always be
 * emitted — keep it outside @theme. */
@keyframes dropArrow {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== CONTAINER UTILITY ===== */
@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

/* ===== COMPONENT LAYER ===== */
@layer components {
  .app-sidebar-halo {
    position: absolute;
    top: -8rem;
    left: -9rem;
    width: 26rem;
    height: 26rem;
    pointer-events: none;
    background: var(--gradient-sidebar-halo);
    filter: blur(28px);
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  /* Lighthouse chat markdown styles */
  .lighthouse-markdown ul,
  .lighthouse-markdown ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
  }

  .lighthouse-markdown li {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
  }

  .lighthouse-markdown li > p {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* Nested list styling - different bullets for different levels */
  .lighthouse-markdown > ul {
    list-style-type: disc !important;
  }

  .lighthouse-markdown > ul > li > ul,
  .lighthouse-markdown ul ul {
    list-style-type: "◦ " !important;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .lighthouse-markdown > ul > li > ul > li > ul,
  .lighthouse-markdown ul ul ul {
    list-style-type: "▪ " !important;
  }

  .lighthouse-markdown > ul > li > ul > li > ul > li > ul,
  .lighthouse-markdown ul ul ul ul {
    list-style-type: "- " !important;
  }

  /* Nested lists indentation */
  .lighthouse-markdown ul ul,
  .lighthouse-markdown ol ol,
  .lighthouse-markdown ul ol,
  .lighthouse-markdown ol ul {
    padding-left: 1.25rem;
  }

  .lighthouse-markdown h2,
  .lighthouse-markdown h3,
  .lighthouse-markdown h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .lighthouse-markdown p + ul,
  .lighthouse-markdown p + ol {
    margin-top: 0.25rem;
  }

  .lighthouse-markdown table {
    min-width: 100%;
    width: max-content;
  }

  .lighthouse-markdown [data-streamdown="mermaid-block"] {
    max-width: 100%;
    min-width: 0;
  }

  .lighthouse-markdown
    [data-streamdown="mermaid-block"]
    > div:first-child
    .fixed {
    padding: 1rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .lighthouse-markdown
    [data-streamdown="mermaid-block"]
    > div:first-child
    .fixed
    > [role="presentation"] {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border: 1px solid var(--border-neutral-tertiary);
    border-radius: 0.75rem;
    background: var(--bg-neutral-tertiary);
    backdrop-filter: blur(46px);
  }

  /* !important beats the inline max-width px that mermaid sets on the svg.
     Scoped to the inline chart (last child): streamdown renders its
     fullscreen overlay inside the controls row and sizes it itself. */
  .lighthouse-markdown [data-streamdown="mermaid-block"] > div:last-child svg {
    max-width: 100% !important;
    height: auto;
  }

  /* Streamdown's fullscreen [&>div]:h-full can stretch the floating
     pan/zoom controls; keep the pills content-sized and inside the chart. */
  .lighthouse-markdown
    [data-streamdown="mermaid-block"]
    div:has(> div[role="application"])
    > div:not([role="application"]) {
    height: auto !important;
  }

  .lighthouse-markdown
    [data-streamdown="mermaid-block"]
    > div:last-child
    > div:not([role="application"]) {
    bottom: 0 !important;
    flex-direction: row !important;
  }

  .lighthouse-markdown
    [data-streamdown="mermaid-block"]
    > div:first-child
    .fixed
    [role="presentation"]
    > div
    > div:not([role="application"]) {
    bottom: 3rem !important;
  }

  /* Lighthouse overview banner animated gradient layers */
  .lighthouse-banner-gradient-neutral {
    background: radial-gradient(
        circle at center,
        var(--bg-neutral-tertiary) 0,
        transparent 50%
      )
      no-repeat;
  }

  .lighthouse-banner-gradient-primary {
    background: radial-gradient(
        circle at center,
        var(--bg-button-primary) 0,
        transparent 50%
      )
      no-repeat;
  }

  .lighthouse-banner-gradient-primary-hover {
    background: radial-gradient(
        circle at center,
        var(--bg-button-primary-hover) 0,
        transparent 50%
      )
      no-repeat;
  }

  .lighthouse-banner-gradient-primary-press {
    background: radial-gradient(
        circle at center,
        var(--bg-button-primary-press) 0,
        transparent 50%
      )
      no-repeat;
  }
}

/* ===== UTILITY LAYER ===== */
@layer utilities {
  /* Screen reader only - visually hidden but accessible */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Hide scrollbar */
  .no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  /* Minimal scrollbar styles
   *
   * The descendant selectors target `.cm-scroller` so that CodeMirror
   * editors which receive `.minimal-scrollbar` on their `.cm-editor`
   * wrapper also style their inner scroller (the element that actually
   * overflows when the editor fills a bounded container).
   */
  .minimal-scrollbar,
  .minimal-scrollbar .cm-scroller {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgb(203 213 225 / 0.5) transparent; /* thumb and track for Firefox */
  }

  .minimal-scrollbar:hover,
  .minimal-scrollbar .cm-scroller:hover {
    scrollbar-color: rgb(148 163 184 / 0.7) transparent; /* darker thumb on hover */
  }

  /* Webkit browsers (Chrome, Safari, Edge) */
  .minimal-scrollbar::-webkit-scrollbar,
  .minimal-scrollbar .cm-scroller::-webkit-scrollbar {
    width: 6px;
  }

  .minimal-scrollbar::-webkit-scrollbar-track,
  .minimal-scrollbar .cm-scroller::-webkit-scrollbar-track {
    background: transparent;
  }

  .minimal-scrollbar::-webkit-scrollbar-thumb,
  .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225 / 0.5);
    border-radius: 3px;
    transition: background-color 0.2s ease;
  }

  .minimal-scrollbar::-webkit-scrollbar-thumb:hover,
  .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148 163 184 / 0.7);
  }

  /* Dark mode */
  .dark .minimal-scrollbar,
  .dark .minimal-scrollbar .cm-scroller {
    scrollbar-color: rgb(71 85 105 / 0.5) transparent;
  }

  .dark .minimal-scrollbar:hover,
  .dark .minimal-scrollbar .cm-scroller:hover {
    scrollbar-color: rgb(100 116 139 / 0.7) transparent;
  }

  .dark .minimal-scrollbar::-webkit-scrollbar-thumb,
  .dark .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb {
    background-color: rgb(71 85 105 / 0.5);
  }

  .dark .minimal-scrollbar::-webkit-scrollbar-thumb:hover,
  .dark .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb:hover {
    background-color: rgb(100 116 139 / 0.7);
  }

  /* Download icon animation */
  .animate-download-icon polyline,
  .animate-download-icon line {
    animation: dropArrow 0.6s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* ===== BASE LAYER ===== */
@layer base {
  /* Global base styles */
  body {
    @apply bg-bg-neutral-primary text-text-neutral-primary;
  }
}

/* Neutralize the browser's native autofill highlight (Chromium/WebKit paint a
   forced blue/yellow background on :autofill). box-shadow inset masks it; the
   long transition stops the native color from flashing before the mask lands.
   Kept UNLAYERED + !important: the mask is a box-shadow and collides with
   shadcn's focus:ring (also a box-shadow, in @layer utilities) — a layered
   rule can't win that, so this sits outside the cascade layers. */
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-neutral-secondary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important;
  caret-color: var(--text-neutral-secondary);
  transition: background-color 5000s ease-in-out 0s;
}

/* Override vaul's injected user-select: none to allow text selection in drawers */
@media (hover: hover) and (pointer: fine) {
  [data-vaul-drawer][data-vaul-drawer] {
    user-select: text;
  }
}
