/* AV search component */
@layer components {
  .av-search {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    --av-search-accent: var(--av-accent);
  }

  .av-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--av-search-accent, rgba(34, 36, 52, 0.65));
    pointer-events: none;
    transition: transform 120ms ease, color 120ms ease;
  }

  .av-search__input {
    padding-left: 48px;
    padding-right: 14px;
    background: linear-gradient(135deg, rgba(53, 171, 178, 0.12), rgba(118, 188, 121, 0.08));
    border: 1px solid color-mix(in srgb, var(--av-search-accent, #35abb2) 45%, #222434 55%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 120ms ease;
    text-align: left;
  }

  .av-search__input::placeholder {
    color: rgba(34, 36, 52, 0.55);
    text-align: center;
  }

  .av-search:hover .av-search__input {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  }

  .av-search:focus-within .av-search__input {
    border-color: color-mix(in srgb, var(--av-search-accent, #35abb2) 70%, #ffffff 30%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--av-search-accent, #35abb2) 32%, transparent 68%), 0 18px 40px rgba(15, 23, 42, 0.16);
    background: linear-gradient(135deg, rgba(53, 171, 178, 0.16), rgba(118, 188, 121, 0.14));
  }

  .av-search:focus-within .av-search__icon {
    color: var(--av-search-accent, var(--av-accent));
    transform: translateY(-50%) scale(1.04);
  }

  /* Optional sizing tweak for tighter spaces */
  .av-search--compact .av-search__input {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Contextual icon accents */
  .av-search--learning {
    --av-search-accent: #76BC79;
  }

  .av-search--repertoire {
    --av-search-accent: #EBA63F;
  }

  .av-search--exercises {
    --av-search-accent: #3CBCC3;
  }

  .av-search--routine {
    --av-search-accent: #5B3082;
  }
}