/* ===========================================================================
   NOIR CHROMA — search.php
   Overrides assets/css/search-page.css (.sp-*).

   ⚠ This one page is different from every other file in the skin.
   assets/css/search-page.css says so in its own header: it was written to be
   "Defensive against the 'immersive' skin overrides", and it enforces that
   with ~35 hard-coded `#ffffff !important` / `#0f172a !important`
   declarations. An !important declaration can only be beaten by another
   !important, so specificity alone is not enough here and the usual
   "no !important in the skin" rule cannot hold on this file.

   The damage is contained two ways:
     1. Section 1 re-points the page's own --sp-* token set. Everything that
        reads a token — and that is most of the file — is fixed with no
        !important at all.
     2. Section 2 carries !important ONLY on the exact declarations that the
        base file forces, and nothing else.
   =========================================================================== */

/* ---- 1. Token bridge ---------------------------------------------------- */
/* search-page.css:10 declares --sp-* on `.sp-page` (0-1-0).
   This selector is 0-2-1, so it wins cleanly. */

body[data-skin="noir"] .sp-page {
  --sp-text:          var(--n-text);
  --sp-muted:         var(--n-text-muted);
  --sp-faint:         var(--n-text-dim);
  --sp-border:        var(--n-border);
  --sp-border-strong: var(--n-border-strong);
  --sp-surface:       var(--n-surface);
  --sp-surface-soft:  var(--n-surface-2);
  --sp-bg:            var(--n-bg);
  --sp-primary:       var(--n-accent);
  --sp-primary-hover: var(--n-violet);
  --sp-primary-soft:  rgba(255, 61, 139, .12);
  --sp-primary-ring:  rgba(255, 61, 139, .28);

  --sp-radius-xl: var(--n-r-xl);
  --sp-radius-lg: var(--n-r-md);
  --sp-radius-md: var(--n-r-sm);
  --sp-radius-sm: var(--n-r-sm);

  --sp-elev-xs:    none;
  --sp-elev-sm:    none;
  --sp-elev-md:    var(--n-sh-2);
  --sp-elev-hover: var(--n-sh-2);

  background: var(--n-bg);
  color: var(--n-text);
}


/* ---- 2. Counters for the forced declarations ---------------------------- */
/* Each rule below cancels an !important in assets/css/search-page.css.
   Nothing here carries !important that does not have to. */

body[data-skin="noir"] .sp-page .sp-hero {
  background: var(--n-ink-1) !important;
  background-color: var(--n-ink-1) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--n-border);
  position: relative;
}
body[data-skin="noir"] .sp-page .sp-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--n-grad-line);
  opacity: .5;
}

body[data-skin="noir"] .sp-page .sp-search-bar {
  background: var(--n-surface-2) !important;
  background-color: var(--n-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--n-border-strong) !important;
  box-shadow: none !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar:focus-within {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--n-pink), var(--n-glow) !important;
}

/* The input and the button are armed with an ID in the base file
   (`body[data-skin] .sp-page .sp-search-bar input#s-query`, 1-3-2), and an ID
   outranks any number of classes. Matching that shape — and adding the skin
   attribute value on top — is the only way to reach these two elements. */
body[data-skin="noir"] .sp-page .sp-search-bar input#s-query,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-input {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--n-fg) !important;
  -webkit-text-fill-color: var(--n-fg) !important;
  caret-color: var(--n-pink) !important;
  font-size: max(16px, 1rem) !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar input#s-query::placeholder,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-input::placeholder {
  color: var(--n-text-dim) !important;
  -webkit-text-fill-color: var(--n-text-dim) !important;
  opacity: 1 !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-input:-webkit-autofill,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--n-surface-2) inset !important;
  -webkit-text-fill-color: var(--n-fg) !important;
  color: var(--n-fg) !important;
}

body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-bar-icon,
body[data-skin="noir"] .sp-page .sp-search-bar:focus-within .sp-search-bar-icon {
  color: var(--n-text-muted) !important;
  -webkit-text-fill-color: var(--n-text-muted) !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar:focus-within .sp-search-bar-icon {
  color: var(--n-pink) !important;
  -webkit-text-fill-color: var(--n-pink) !important;
}

body[data-skin="noir"] .sp-page .sp-search-bar button#s-btn,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-btn {
  background: var(--n-grad) !important;
  background-color: transparent !important;
  border: 0 !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar button#s-btn:hover,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-btn:hover {
  background: var(--n-grad) !important;
  background-color: transparent !important;
  filter: brightness(1.08);
}
body[data-skin="noir"] .sp-page .sp-search-bar button#s-btn span,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-btn span {
  color: var(--n-on-accent) !important;
  -webkit-text-fill-color: var(--n-on-accent) !important;
}
body[data-skin="noir"] .sp-page .sp-search-bar button#s-btn svg,
body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-btn svg {
  color: var(--n-on-accent) !important;
  stroke: currentColor;
}

body[data-skin="noir"] .sp-page .sp-filters-row,
body[data-skin="noir"] .sp-page .sp-palette-card {
  background: var(--n-surface) !important;
  border: 1px solid var(--n-border);
  box-shadow: none;
}

/* Native <select>, never replaced by custom-dropdown.js on this page.
   color-scheme:dark makes the popover legible; the chevron is a data URI,
   which is safe in an external stylesheet (inside an inline <style> the
   '<svg' token breaks the iOS Safari HTML parser). */
body[data-skin="noir"] .sp-page .sp-select {
  color-scheme: dark;
  background: var(--n-surface-2) !important;
  background-color: var(--n-surface-2) !important;
  color: var(--n-text) !important;
  -webkit-text-fill-color: var(--n-text) !important;
  border: 1px solid var(--n-border) !important;
  font-size: max(16px, .95rem) !important;
}
body[data-skin="noir"] .sp-page .sp-select:hover { border-color: var(--n-border-strong) !important; }
body[data-skin="noir"] .sp-page .sp-select option {
  background-color: var(--n-ink-3);
  color: var(--n-text);
}
body[data-skin="noir"] .sp-page .sp-select-icon { color: var(--n-text-muted); }

body[data-skin="noir"] .sp-page .sp-filters-toggle {
  background: transparent;
  border: 1px solid var(--n-border-strong);
  color: var(--n-text);
}
body[data-skin="noir"] .sp-page .sp-filters-toggle:hover { border-color: var(--n-accent); }

/* The swatches keep their real colours — they are the query, not decoration.
   The base file deliberately never sets their background (an inline style
   supplies the chip colour), so only the ring needs adjusting for ink. */
body[data-skin="noir"] .sp-page .sp-swatch {
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
body[data-skin="noir"] .sp-page .sp-swatch:hover {
  background: transparent !important;
  box-shadow: var(--n-glow);
}
body[data-skin="noir"] .sp-page .sp-swatch.active {
  box-shadow: 0 0 0 2px var(--n-fg), var(--n-glow);
}

body[data-skin="noir"] .sp-page .sp-active-chip,
body[data-skin="noir"] .sp-page .sp-active-filter-pill,
body[data-skin="noir"] .sp-page .sp-clear-all-btn {
  background: var(--n-surface-2) !important;
  border: 1px solid var(--n-border) !important;
  color: var(--n-text) !important;
}
body[data-skin="noir"] .sp-page .sp-active-chip-clear:hover,
body[data-skin="noir"] .sp-page .sp-active-filter-clear:hover {
  color: var(--n-on-accent) !important;
  background: var(--n-accent);
}
body[data-skin="noir"] .sp-page .sp-active-chip-dot,
body[data-skin="noir"] .sp-page .sp-active-filter-dot {
  border: 1px solid rgba(255, 255, 255, .2);
}


/* ---- 3. Results --------------------------------------------------------- */

body[data-skin="noir"] .sp-page .sp-grid { gap: 3px; }

body[data-skin="noir"] .sp-page .sp-card {
  background: var(--n-ink-2) !important;
  border: 0;
  border-radius: var(--n-r-xs);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .sp-page .sp-card:hover { transform: translateY(-2px); }
body[data-skin="noir"] .sp-page .sp-card-img {
  background: var(--n-ink-3);
  filter: brightness(.92);
  transition: filter var(--n-dur-slow) var(--n-ease), transform var(--n-dur-slow) var(--n-ease-emph);
}
body[data-skin="noir"] .sp-page .sp-card:hover .sp-card-img {
  filter: brightness(1.04);
  transform: scale(1.04);
}
body[data-skin="noir"] .sp-page .sp-card-body {
  background: var(--n-ink-2) !important;
  border-top: 1px solid var(--n-border);
}
body[data-skin="noir"] .sp-page .sp-card-title { color: var(--n-fg); font-family: var(--n-font-display); }
body[data-skin="noir"] .sp-page .sp-card-text { color: var(--n-text-muted); }
body[data-skin="noir"] .sp-page .sp-card-tag {
  background: rgba(255, 255, 255, .08);
  color: var(--n-text-muted);
}
body[data-skin="noir"] .sp-page .sp-card-icon { color: var(--n-accent); }

body[data-skin="noir"] .sp-page .sp-results-header { border-bottom: 1px solid var(--n-border); }
body[data-skin="noir"] .sp-page .sp-results-title { font-family: var(--n-font-display); }


/* ---- 4. Pagination & empty state --------------------------------------- */

body[data-skin="noir"] .sp-page .sp-page-btn {
  background: var(--n-surface-2) !important;
  border: 1px solid var(--n-border) !important;
  color: var(--n-text-muted) !important;
  min-width: 40px;
  min-height: 40px;
}
body[data-skin="noir"] .sp-page .sp-page-btn:hover:not(:disabled):not(.active) {
  background: var(--n-surface-hover) !important;
  color: var(--n-fg) !important;
  border-color: var(--n-border-strong) !important;
}
body[data-skin="noir"] .sp-page .sp-page-btn.active {
  background: var(--n-grad) !important;
  color: var(--n-on-accent) !important;
  -webkit-text-fill-color: var(--n-on-accent) !important;
  border-color: transparent !important;
}
body[data-skin="noir"] .sp-page .sp-page-btn-arrow svg { color: currentColor; }
body[data-skin="noir"] .sp-page .sp-page-dots {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--n-text-dim) !important;
  -webkit-text-fill-color: var(--n-text-dim) !important;
}

body[data-skin="noir"] .sp-page .sp-empty {
  background: var(--n-surface) !important;
  border: 1px solid var(--n-border);
}
body[data-skin="noir"] .sp-page .sp-empty-mark { color: var(--n-fg-3); }
body[data-skin="noir"] .sp-page .sp-empty-title { color: var(--n-fg); font-family: var(--n-font-display); }
body[data-skin="noir"] .sp-page .sp-empty-hint { color: var(--n-text-muted) !important; }
body[data-skin="noir"] .sp-page .sp-empty-btn {
  background: var(--n-grad) !important;
  color: var(--n-on-accent) !important;
  -webkit-text-fill-color: var(--n-on-accent) !important;
  border: 0 !important;
}
body[data-skin="noir"] .sp-page .sp-empty-btn-ghost {
  background: transparent !important;
  color: var(--n-text) !important;
  border: 1px solid var(--n-border-strong) !important;
}
body[data-skin="noir"] .sp-page .sp-empty-btn-ghost:hover { border-color: var(--n-accent) !important; }

body[data-skin="noir"] .sp-page .sp-loader { color: var(--n-text-dim); }


/* ---- 5. Hero typography ------------------------------------------------- */

body[data-skin="noir"] .sp-page .sp-hero-eyebrow {
  color: var(--n-fg);
  font-family: var(--n-font-display);
  letter-spacing: var(--n-tracking-wide);
  text-transform: uppercase;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .sp-page .sp-hero-eyebrow {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
body[data-skin="noir"] .sp-page .sp-hero-title {
  font-family: var(--n-font-display);
  letter-spacing: -.02em;
}
body[data-skin="noir"] .sp-page .sp-search-helper-icon { color: var(--n-accent); }
body[data-skin="noir"] .sp-page .sp-palette-card-title,
body[data-skin="noir"] .sp-page .sp-palette-family-label { font-family: var(--n-font-display); }
body[data-skin="noir"] .sp-page .sp-palette-card-toggle { color: var(--n-accent); }


/* ---- 6. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .sp-page .sp-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-skin="noir"] .sp-page .sp-card:hover { transform: none; }
  body[data-skin="noir"] .sp-page .sp-card:active { transform: scale(.985); }
  body[data-skin="noir"] .sp-page .sp-search-bar .sp-search-input { font-size: max(16px, 1rem) !important; }
  body[data-skin="noir"] .sp-page .sp-select { font-size: max(16px, .95rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .sp-page .sp-card,
  body[data-skin="noir"] .sp-page .sp-card-img,
  body[data-skin="noir"] .sp-page .sp-swatch { transition: none; }
  body[data-skin="noir"] .sp-page .sp-card:hover { transform: none; }
  body[data-skin="noir"] .sp-page .sp-card:hover .sp-card-img { transform: none; }
}