/* ============================================================================
   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 design 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 removed 2026-10-02 (James: drawer search replaces the sticky bar).
   - 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{
  /* UNSTICKIED (James, 2026-10-02): the bar no longer follows the scroll.
     The unified nav drawer's built-in search is the persistent search now.
     The bar stays in-flow where each page placed it. */
  position:static;
  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:transparent;           /* Golden: transparent on cream */
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(var(--desert-ink-rgb), .12);  /* thin ink hairline */
  box-shadow:0 8px 28px rgba(var(--desert-shadow-rgb), .45);
  transition:border-color .18s ease, box-shadow .18s ease;
}.pv-search__bar:focus-within{
  border-color:var(--pv-red,var(--brand-red));
  box-shadow:0 0 0 3px var(--pv-red-glow,rgba(var(--brand-red-rgb), .35)), 0 8px 28px rgba(var(--desert-shadow-rgb), .45);
}.pv-search__icon{
  flex:0 0 auto;
  color:rgba(var(--desert-ink-rgb), .45);
  display:flex;
  align-items:center;
  justify-content:center;
  /* It is a real <button> now (one click → front-and-center reveal):
     strip the native button chrome, keep the pill's look. */
  background:none;
  border:0;
  padding:6px;
  margin:0;
  font:inherit;
  cursor:pointer;
  border-radius:50%;
}.pv-search__icon:focus-visible{
  outline:2px solid var(--pv-red,var(--brand-red));
  outline-offset:2px;
}.pv-search__bar:focus-within .pv-search__icon{ color:var(--pv-red,var(--brand-red)); }

/* -- Front-and-center reveal (James 2026-09-29 — interaction polish) -----
   Brief luxury glow pulse on the pill when PVSearch.reveal() fires or the
   magnifier is clicked. Signal-red ring breathes out and settles;the bar
   never moves position (no layout shift — box-shadow only). */
@keyframes pv-search-reveal{
  0%{
    border-color:rgba(var(--desert-ink-rgb), .12);
    box-shadow:0 0 0 0 rgba(var(--brand-red-rgb), 0), 0 8px 28px rgba(var(--desert-shadow-rgb), .45);
  }
  30%{
    border-color:var(--pv-red,var(--brand-red));
    box-shadow:0 0 0 5px var(--pv-red-glow,rgba(var(--brand-red-rgb), .35)),
               0 0 44px var(--pv-red-glow,rgba(var(--brand-red-rgb), .28)),
               0 8px 28px rgba(var(--desert-shadow-rgb), .45);
  }
  100%{
    border-color:rgba(var(--desert-ink-rgb), .12);
    box-shadow:0 0 0 0 rgba(var(--brand-red-rgb), 0), 0 8px 28px rgba(var(--desert-shadow-rgb), .45);
  }
}.pv-search__bar--reveal{
  animation:pv-search-reveal 1.15s cubic-bezier(.22,.61,.36,1);
}.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,var(--desert-ink));
  font:inherit;
  font-size:16px; /* 16px+ kills iOS auto-zoom */
  line-height:1.4;
}.pv-search__input::placeholder{ color:rgba(var(--desert-ink-rgb), .45); }.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(var(--desert-ink-rgb), .08);
  color:var(--pv-ivory,var(--desert-ink));
  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(var(--desert-ink-rgb), .16); }.pv-search__clear:focus-visible,
.pv-search__retry:focus-visible,
.pv-search__opt:focus-visible{
  outline:2px solid var(--pv-red,var(--brand-red));
  outline-offset:2px;
}

/* -- Results dropdown (keyboard-navigable;combobox semantics in search.js)
   Visual design of this panel follows the approved spec — structure only. */
.pv-search__results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:60; /* above sticky mid-page bars (z:30); dropdown must paint over them */
  max-height:min(60vh, 420px);
  overflow:auto;
  margin:0;
  padding:10px;
  border-radius:18px;
  background:var(--desert-bg);
  border:1px solid rgba(var(--desert-ink-rgb), .12);
  box-shadow:0 16px 48px rgba(var(--desert-shadow-rgb), .55);
}.pv-search__results[hidden]{ display:none; }.pv-search__opt{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:68px; /* uniform-search 2026-09-28: 56px thumb + breathing room */
  padding:6px 10px;
  border-radius:12px;
  cursor:pointer;
}.pv-search__opt:hover{ background:rgba(var(--desert-ink-rgb), .06); }.pv-search__opt[aria-selected="true"]{
  background:rgba(var(--desert-ink-rgb), .08);
  box-shadow:inset 2px 0 0 var(--pv-red,var(--brand-red)); /* active-item marker — awaiting visual approval */
}.pv-search__opt-img{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:8px;
  object-fit:cover;
  background:rgba(var(--desert-ink-rgb), .06);
}.pv-search__opt-tx{
  flex:1 1 auto;
  min-width:0;
}.pv-search__opt-t{
  color:var(--pv-ivory,var(--desert-ink));
  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(var(--desert-ink-rgb), .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(var(--desert-ink-rgb), .62));
}/* Count / empty-state line */
.pv-search__meta{
  min-height:22px;
  margin:6px 4px 0;
  font-size:13px;
  color:rgba(var(--desert-ink-rgb), .45);
}.pv-search__meta strong{ color:var(--pv-ivory,var(--desert-ink)); 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,var(--desert-ink)); font-weight:600; }.pv-search__retry{
  border:1px solid rgba(var(--desert-ink-rgb), .18);
  background:transparent;
  color:var(--pv-ivory,var(--desert-ink));
  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,var(--brand-red)); }@media (min-width:1024px){.pv-search__bar{ height:48px; }
}@media (prefers-reduced-motion:reduce){.pv-search__bar{ transition:none; }/* No pulse — the reveal still lands, marked by a static accent border. */
  .pv-search__bar--reveal{ animation:none; border-color:var(--pv-red,var(--brand-red)); }
}/* 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;
  }
}

/* ============ MOBILE: keep dropdown clear of sticky bars (2026-10-11) ============ */
@media (max-width:640px){
  .pv-search__results{
    max-height:calc(100dvh - 230px);
    max-height:calc(100svh - 230px);
  }
}