/* ============================================================================
   assets/css/dswd-autocomplete.css — the type-ahead suggestion panel

   The panel lives directly under <body> (see dswd-autocomplete.js for why),
   so nothing here inherits from a filter bar. Every rule is scoped to
   .dswd-sug to keep it from touching the rest of the page.
   ========================================================================= */

.dswd-sug{
  position:fixed; z-index:3000;
  background:#fff;
  border-radius:16px;
  box-shadow:0 22px 60px rgba(11,37,69,.20), 0 2px 8px rgba(11,37,69,.08);
  max-height:min(62vh, 480px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:7px;
  font-family:inherit;
  animation:dswdSugIn .14s ease-out;
}
@keyframes dswdSugIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dswd-sug{ animation:none; } }

.dswd-sug::-webkit-scrollbar{ width:9px; }
.dswd-sug::-webkit-scrollbar-thumb{ background:#cfd9e8; border-radius:9px; border:2px solid #fff; }
.dswd-sug::-webkit-scrollbar-thumb:hover{ background:#b3c2d8; }

/* ── Group heading ─────────────────────────────────────────────────────── */
.dswd-sug-group{
  display:flex; align-items:center; gap:7px;
  padding:9px 12px 5px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8496ae;
}
.dswd-sug-group i{ font-size:10px; opacity:.8; }

/* ── One suggestion ────────────────────────────────────────────────────── */
.dswd-sug-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:11px;
  text-decoration:none; color:inherit;
  transition:background .12s;
}
.dswd-sug-item:hover,
.dswd-sug-item.on{ background:#eef3fb; text-decoration:none; color:inherit; }
.dswd-sug-item.on{ box-shadow:inset 0 0 0 1.5px #bcd6ff; }

.dswd-sug-item .ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.dswd-sug-item .tx{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.dswd-sug-item .t{
  font-size:13.5px; font-weight:700; color:#0b2545; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dswd-sug-item .s{
  font-size:11.5px; color:#64748b; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dswd-sug-item .mt{
  flex:0 0 auto; font-size:10.5px; font-weight:800; color:#51607a;
  background:#eef2f7; border-radius:8px; padding:3px 9px; white-space:nowrap;
}
.dswd-sug-item mark{
  background:#fff3c4; color:inherit; padding:0 1px; border-radius:3px; font-weight:800;
}

/* ── Empty / error state ───────────────────────────────────────────────── */
.dswd-sug-empty{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 15px 20px;
}
.dswd-sug-empty i{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:#eef2f7; color:#8496ae;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.dswd-sug-empty strong{ display:block; font-size:13.5px; color:#0b2545; margin-bottom:3px; }
.dswd-sug-empty span{ display:block; font-size:11.8px; color:#64748b; line-height:1.5; }

/* ── Scope footnote ────────────────────────────────────────────────────── */
.dswd-sug-foot{
  margin-top:5px; padding:8px 12px;
  border-top:1px solid #eef2f7;
  font-size:11px; font-weight:700; color:#0f6b4a;
  display:flex; align-items:center; gap:7px;
}

/* ── Live region: announced, never seen ────────────────────────────────── */
.dswd-sug-live{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── The search field itself ───────────────────────────────────────────── */
/* :where() keeps specificity at zero so a page's own styling always wins. */
:where(.dswd-searchbar){
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid #dde5ef; border-radius:12px;
  min-height:44px; transition:.16s;
}

/* The gutter is structural, not decoration, so it is stated at normal
   specificity rather than inside :where().

   Several pages open their stylesheet with `* { margin:0; padding:0 }`. The
   universal selector also scores zero, so against a :where() rule the winner
   was simply whichever came last — and a page's inline <style> always comes
   after the external sheets. The component lost its gutter on exactly those
   pages, leaving the magnifier and the "/" chip pressed against the border.

   A class beats `*` whatever the order. A page that genuinely wants a
   different gutter still wins: any rule of its own naming the class scores the
   same and comes later. */
.dswd-searchbar{ padding:0 13px; }
:where(.dswd-searchbar:focus-within){
  border-color:#8fb4ff; box-shadow:0 0 0 4px rgba(0,56,168,.10);
}
:where(.dswd-searchbar) > i{ color:#8496ae; font-size:13px; flex:0 0 auto; }
:where(.dswd-searchbar) > input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:13.5px; color:#0b2545; padding:10px 0;
}
:where(.dswd-searchbar) > input::placeholder{ color:#9aa8bd; }
:where(.dswd-searchbar) .kbd{
  flex:0 0 auto; font-size:10.5px; font-weight:800; color:#8496ae;
  background:#f3f6fb; border:1px solid #e3eaf4; border-radius:6px;
  padding:2px 7px; line-height:1.5;
}
@media (max-width:640px){ :where(.dswd-searchbar) .kbd{ display:none; } }

/* Dark search fields (the sidebar) keep their own colours. */
:where(.dswd-searchbar.on-dark){
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
}
:where(.dswd-searchbar.on-dark) > input{ color:#eaf1fb; }
:where(.dswd-searchbar.on-dark) > input::placeholder{ color:rgba(234,241,251,.55); }
:where(.dswd-searchbar.on-dark) > i{ color:rgba(234,241,251,.7); }