/* Surfaces Tailwind does not own — selection, caret, scrollbars, focus ring.
   Ported from index.css, extended to cover the browser chrome the SPA left at
   its defaults: selection, caret, focus ring, and figures in data tables. */

:root {
  --app-ink: #111827;
  --app-surface: #ffffff;
  --app-line: #e5e7eb;
  --app-muted: #9ca3af;
  --app-select: #111827;
  --app-select-ink: #ffffff;
}

.dark {
  --app-ink: #f3f4f6;
  --app-surface: #0d1117;
  --app-line: #1f2937;
  --app-muted: #6b7280;
  --app-select: #f3f4f6;
  --app-select-ink: #000000;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-variation-settings: 'opsz' 32;
}

/* ─── Browser surfaces ──────────────────────────────────────────────────── */

::selection {
  background: var(--app-select);
  color: var(--app-select-ink);
}

:root { caret-color: var(--app-ink); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
* { scrollbar-width: thin; scrollbar-color: #e5e7eb transparent; }
.dark * { scrollbar-color: #4b5563 transparent; }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Keyboard focus only — pointer users never see the ring, the way the SPA behaved. */
:focus-visible {
  outline: 2px solid var(--app-ink);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

a { text-underline-offset: 3px; }

/* Aligns digits in the keyword and competitor tables. */
table, .tabular { font-variant-numeric: tabular-nums; }

/* The colour swatch input has heavy default chrome in every engine. */
input[type='color'] { -webkit-appearance: none; appearance: none; border: none; padding: 0; background: none; }
input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
input[type='color']::-webkit-color-swatch { border: 1px solid var(--app-line); border-radius: 6px; }
input[type='color']::-moz-color-swatch { border: 1px solid var(--app-line); border-radius: 6px; }

/* ─── Motion ────────────────────────────────────────────────────────────── */

@keyframes app-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes app-fade-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes app-fade-down { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes app-zoom-in { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
@keyframes app-scan { 0% { transform: translateY(-100%) } 100% { transform: translateY(500%) } }

.animate-fade-in { animation: app-fade-in .3s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-up { animation: app-fade-up .7s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-down { animation: app-fade-down .25s cubic-bezier(.16,1,.3,1) both; }
.animate-zoom-in { animation: app-zoom-in .7s cubic-bezier(.16,1,.3,1) both; }
.animate-scan { animation: app-scan 3s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Utilities the SPA relied on ───────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* Tailwind's display utilities (flex, grid, inline) out-specify the UA's
   `[hidden] { display: none }`, so an element carrying both stays visible.
   Every toggled-by-attribute element in this app relies on this rule. */
[hidden] { display: none !important; }

.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Native selects keep their platform arrow; these keep it aligned with the ring. */
select { background-image: none; }