/* shared typography — matches the rest of the suite */
.pes{font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;letter-spacing:-.05em}
.pes *{font-family:inherit;letter-spacing:inherit;box-sizing:border-box}

.pes{--pes-accent:#6F00FF;--pes-field:#fff;--pes-chip:#fff;--pes-ink:#2b2140;
  --pes-muted:#6b6480;--pes-radius:10px;--pes-border:2px;display:block;position:relative}

/* the field */
.pes-field{position:relative}
.pes .pes-input{width:100%;padding:15px 21px;border:var(--pes-border) solid var(--pes-accent);
  border-radius:var(--pes-radius);background:var(--pes-field);color:var(--pes-ink);
  font-size:1rem;line-height:1.4;outline:none;appearance:none;margin:0;
  box-shadow:none;transition:box-shadow .15s}
.pes .pes-input::placeholder{color:var(--pes-muted);opacity:.75}
.pes .pes-input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--pes-accent) 18%,transparent)}
.pes .pes-input::-webkit-search-cancel-button{cursor:pointer}

/* suggestions */
.pes-results{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;
  list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--ps-rule,#DEDEDE);
  border-radius:var(--pes-radius);box-shadow:0 14px 36px rgba(27,16,48,.14);
  max-height:320px;overflow:auto}
.pes-results[hidden]{display:none}
.pes-results li{margin:0}
.pes .pes-result{display:block;width:100%;text-align:left;padding:10px 13px;border:0;
  background:none;border-radius:8px;color:var(--pes-ink);font:inherit;font-size:.92rem;
  cursor:pointer;text-decoration:none;appearance:none;margin:0;line-height:1.4}
.pes .pes-result:hover,.pes .pes-result.is-on{background:color-mix(in srgb,var(--pes-accent) 9%,transparent)}
.pes-result mark{background:none;color:var(--pes-accent);font-weight:700}
.pes-empty{padding:11px 13px;color:var(--pes-muted);font-size:.88rem}

/* chips */
.pes-chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:14px}
.pes-chips-label{font-size:.84rem;font-weight:700;color:var(--pes-ink)}
/* A chip is an <a> when it links to a topic and a <button> when it fills the
   search box. The theme repaints button backgrounds on hover, so the two kinds
   drifted apart — everything that differs between them is pinned here. */
.pes a.pes-chip,
.pes button.pes-chip{display:inline-block;padding:9px 16px;border-radius:99px;
  border:1px solid var(--ps-rule,#DEDEDE)!important;
  background:var(--pes-chip)!important;color:var(--pes-ink)!important;
  font-family:inherit;font-weight:inherit;font-size:.86rem;line-height:1.3;
  text-decoration:none;cursor:pointer;appearance:none;margin:0;box-shadow:none;
  text-transform:none;letter-spacing:inherit;
  transition:border-color .12s,color .12s,transform .12s}
.pes a.pes-chip:hover,
.pes button.pes-chip:hover,
.pes a.pes-chip:focus-visible,
.pes button.pes-chip:focus-visible{
  border-color:var(--pes-accent)!important;
  background:var(--pes-chip)!important;
  color:var(--pes-accent)!important;
  transform:translateY(-1px)}

@media(max-width:520px){
  .pes .pes-input{padding:12px 16px;font-size:.95rem}
  .pes .pes-chip{font-size:.82rem;padding:8px 13px}
}

@media(max-width:420px){
  .pes-chips{gap:7px}
  .pes-chips-label{flex:1 1 100%;margin-bottom:2px}
  .pes-results{max-height:60vh}
}

/* group heading inside the results list — no icons, just a quiet label */
.pes .pes-group{
  padding:10px 16px 4px;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#5a5a66;
  pointer-events:none
}
.pes .pes-group:first-child{padding-top:6px}
