/* The new CodeSearch UI styles itself almost entirely with inline styles driven
   by the theme tokens in app.js (light/dark). This file only carries the base
   reset, web-font wiring, scrollbar styling, and the keyframes the component
   references by name. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100vh; }

::selection { background: rgba(137, 90, 248, .32); }

/* thin scrollbars for code panes / carousels (className="cs-scroll") */
.cs-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.cs-scroll::-webkit-scrollbar-track { background: transparent; }
.cs-scroll::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
.cs-scroll::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

input, textarea, select, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: inherit; opacity: .5; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@keyframes csPulse { 50% { opacity: .35; } }
@keyframes csSpin { to { transform: rotate(360deg); } }
@keyframes csUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes csBlink { 50% { opacity: .25; } }
@keyframes csGoldFlow {
  0% { background-position: 0% 50%; filter: brightness(1); }
  50% { background-position: 100% 50%; filter: brightness(1.025); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}
.cs-star-cta { animation: csGoldFlow 4.8s ease-in-out infinite; }
.cs-star-cta:hover { transform: translateY(-1px); }

/* header stat line hides on narrow viewports */
@media (max-width: 720px) { .cs-hidesm { display: none !important; } }

/* keep KaTeX inline math at the surrounding text size */
.katex { font-size: 1em; }

/* Search-bar focus ring. Done in CSS (:focus-within) rather than a React-style
   re-render on focus/blur, so typing never rebuilds the input. The accent
   colours come from CSS variables the app sets on #root per theme. */
.cs-bar:focus-within, .cs-crow:focus-within {
  border-color: var(--cs-primline) !important;
  box-shadow: 0 0 0 3px var(--cs-primsoft) !important;
}
.cs-bar:focus-within .cs-sico { color: var(--cs-primary) !important; }