/* ============================================================================
   Previously — Uniform Search · shared/search/search.css
   ONE source of truth for the search bar. Every page consumes this file;
   no page writes its own search styles. (Uniform-search rule, James 2026-09-28)
   Brand tokens: Noir glass bg, Bone ink, Signal Red accent (never a fill).

   Status: SPEC-BUILT — this is the hardened structural base. Visual design
   (pill radius, glass treatment, dropdown artwork, exact colors) is awaiting
   James's mockup approval. Do NOT finalize visuals here.

   Token law (triple-check §B3/B4/B5/B6):
   - --pv-nav-h is NEVER redeclared here — it comes from the root tokens
     (64px desktop / 56px below 1024px). A local default would misplace the
     sticky offset 8px low on every phone. Do not regress this.
   - z-index comes from the token scale: --pv-z-search (40), below nav (50).
   - max-width fallback is 1280px (--pv-content-max), never 1200px.
   - Token names verified against tokens.css: --pv-nav-h, --pv-z-search,
     --pv-content-max, --pv-red, --pv-red-glow, --pv-ivory, --pv-ivory-dim,
     --pv-noir, --pv-noir-2, --pv-focus-outline.
   ============================================================================ */

.pv-search{
  position:sticky;
  top:calc(var(--pv-nav-h, 64px) + 12px);
  z-index:var(--pv-z-search, 40);
  width:100%;
  max-width:var(--pv-content-max, 1280px);
  margin:0 auto 4px;
}

/* The bar — position:relative so the results dropdown anchors to it */
.pv-search__bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:52px;
  padding:0 8px 0 18px;
  border-radius:999px;
  background:rgba(16,17,20,.82);           /* Noir glass — awaiting visual approval */
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(237,230,214,.16);  /* Bone hairline */
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pv-search__bar:focus-within{
  border-color:var(--pv-red,#ec4634);
  box-shadow:0 0 0 3px var(--pv-red-glow,rgba(236,70,52,.35)), 0 8px 28px rgba(0,0,0,.45);
}
.pv-search__icon{
  flex:0 0 auto;
  color:rgba(237,230,214,.55);
  display:flex;
}
.pv-search__bar:focus-within .pv-search__icon{ color:var(--pv-red,#ec4634); }

.pv-search__label{
  flex:1 1 auto;
  min-width:0;
  display:flex;
}
/* Screen-reader-only accessible name for the input */
.pv-search__sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.pv-search__input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--pv-ivory,#f4efe6);
  font:inherit;
  font-size:16px; /* 16px+ kills iOS auto-zoom */
  line-height:1.4;
}
.pv-search__input::placeholder{ color:rgba(237,230,214,.55); }
.pv-search__input::-webkit-search-cancel-button{ display:none; } /* we own the × */

.pv-search__clear{
  flex:0 0 auto;
  width:44px;   /* WCAG 2.2 AA target size */
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(237,230,214,.10);
  color:var(--pv-ivory,#f4efe6);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:none; /* hidden until there is text to clear */
  align-items:center;
  justify-content:center;
}
/* Visibility is driven by the `hidden` attribute (JS), never aria-hidden:
   aria-hidden on a focusable button hides it from assistive tech while it
   stays in the tab order — a WCAG 4.1.2 failure. */
.pv-search__clear:not([hidden]){ display:inline-flex; }
.pv-search__clear:hover{ background:rgba(237,230,214,.20); }
.pv-search__clear:focus-visible,
.pv-search__retry:focus-visible,
.pv-search__opt:focus-visible{
  outline:2px solid var(--pv-red,#ec4634);
  outline-offset:2px;
}

/* -- Results dropdown (keyboard-navigable; combobox semantics in search.js)
   Visual design of this panel is AWAITING mockup approval — structure only. */
.pv-search__results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:1; /* inside the bar's stacking context — the bar itself is z:search(40) */
  max-height:min(60vh, 420px);
  overflow:auto;
  margin:0;
  padding:6px;
  border-radius:18px;
  background:var(--pv-noir-2,#111113);
  border:1px solid rgba(237,230,214,.16);
  box-shadow:0 16px 48px rgba(0,0,0,.55);
}
.pv-search__results[hidden]{ display:none; }
.pv-search__opt{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px; /* 44px target + breathing room */
  padding:6px 10px;
  border-radius:12px;
  cursor:pointer;
}
.pv-search__opt:hover{ background:rgba(237,230,214,.07); }
.pv-search__opt[aria-selected="true"]{
  background:rgba(237,230,214,.10);
  box-shadow:inset 2px 0 0 var(--pv-red,#ec4634); /* active-item marker — awaiting visual approval */
}
.pv-search__opt-img{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:8px;
  object-fit:cover;
  background:rgba(237,230,214,.08);
}
.pv-search__opt-tx{
  flex:1 1 auto;
  min-width:0;
}
.pv-search__opt-t{
  color:var(--pv-ivory,#f4efe6);
  font-size:14px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pv-search__opt-s{
  color:var(--pv-ivory-dim,rgba(244,239,230,.62));
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* No-JS fallback (inside the mount div, removed by the module when JS runs) */
.pv-search__noscript{
  margin:0;
  padding:12px 4px;
  font-size:13px;
  color:var(--pv-ivory-dim, rgba(244,239,230,.62));
}

/* Count / empty-state line */
.pv-search__meta{
  min-height:22px;
  margin:6px 4px 0;
  font-size:13px;
  color:rgba(237,230,214,.55);
}
.pv-search__meta strong{ color:var(--pv-ivory,#f4efe6); font-weight:600; }
.pv-search__empty{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pv-search__empty .pv-search__q{ color:var(--pv-ivory,#f4efe6); font-weight:600; }
.pv-search__retry{
  border:1px solid rgba(237,230,214,.25);
  background:transparent;
  color:var(--pv-ivory,#f4efe6);
  border-radius:999px;
  padding:6px 14px;
  min-height:44px; /* WCAG 2.2 AA target size */
  font-size:13px;
  cursor:pointer;
}
.pv-search__retry:hover{ border-color:var(--pv-red,#ec4634); }

@media (min-width:1024px){
  .pv-search__bar{ height:48px; }
}

@media (prefers-reduced-motion:reduce){
  .pv-search__bar{ transition:none; }
}

/* Forced colors (Windows High Contrast) — mirrors the tokens.css block:
   focus stays visible, text stays readable, decoration steps aside. */
@media (forced-colors: active){
  .pv-search__results{
    border:1px solid ButtonText;
    background:Canvas;
  }
  .pv-search__opt-t{ color:CanvasText; }
  .pv-search__opt-s{ color:CanvasText; }
  .pv-search__opt[aria-selected="true"]{
    background:Highlight;
    box-shadow:none;
  }
  .pv-search__opt[aria-selected="true"] .pv-search__opt-t,
  .pv-search__opt[aria-selected="true"] .pv-search__opt-s{
    color:HighlightText;
  }
}