/* ============================================================================
   DetectiveCheck — the lookup widget
   The type chips and the search box from the landing page. Lifted out of
   index.html's inline <style> so the blog can use the same component
   instead of a second one that drifts: a reader who meets this control on
   the home page and again mid-article should be meeting one control.
   Loaded by index.html and by every blog page.
   ============================================================================ */
  .btn-shine { position: relative; overflow: hidden; }
  .btn-shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
  .btn-shine:hover::after { animation: shine 750ms var(--ease) forwards; }
  .type-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; }
  .type-chip { display: inline-flex; align-items: center; gap: .4375rem; padding: .5rem .875rem; border-radius: var(--r-pill); background: var(--bg); border: 2px solid var(--line); font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: var(--text-primary); cursor: pointer; box-shadow: var(--neo-1); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease-spring), box-shadow .2s var(--ease); }
  .type-chip svg { width: 15px; height: 15px; }
  .type-chip:hover { color: var(--accent); transform: translate(-1px, -2px); box-shadow: var(--neo-2); }
  .type-chip:active { transform: translate(2px, 2px); box-shadow: var(--neo-press); }
  .type-chip[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: var(--neo-2); }
  .type-chip.just-picked { animation: chipPop .45s var(--ease-spring); }
  .hero-search.swapped input::placeholder { animation: phIn .35s var(--ease) both; }
  .hero-search .btn-primary { transition: background-color .2s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-spring); }
  .hero-search.armed .btn-primary { animation: armed .55s var(--ease-spring); }
  .hero-search { display: flex; align-items: center; gap: .5rem; background: var(--bg); border: 2px solid var(--line); border-radius: var(--r-pill); padding: .4375rem .4375rem .4375rem 1.125rem; box-shadow: var(--neo-3); width: 100%; max-width: 33rem; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
  .hero-search:focus-within { box-shadow: 11px 11px 0 var(--line); transform: translate(-1px, -1px); }
  .hero-search .search-ic { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
  .hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 1.0625rem; color: var(--text-primary); padding: .75rem 0; }
  .hero-search input::placeholder { color: var(--text-muted); }
  .hero-search .btn { flex-shrink: 0; border-radius: var(--r-pill); }
  .cta-search .search-ic { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }

  @media (pointer: coarse) {
    .type-chip { min-height: 40px; }
  }

  @media (max-width: 479.98px) {
    .hero-search { flex-wrap: wrap; border-radius: var(--r-card); padding: .75rem; }
    .hero-search input { flex: 1 1 8rem; padding: .25rem 0; }
    .hero-search .btn { flex: 1 0 100%; border-radius: var(--r-control); }
  }