/* Searchable dropdown for the filter forms.
 *
 * Progressive enhancement over the native <select>: the select stays in the DOM
 * and keeps its name and value, so the GET form submits exactly as before and a
 * visitor without JS gets the plain control. .tgsel only exists once JS has run.
 */

.tgsel{position:relative;flex:1 1 200px;min-width:160px}
.tgsel > select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tgsel__btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 12px;border:1px solid var(--line,#e6e8ec);border-radius:8px;
  background:#fff;font-size:14px;font-family:var(--body,inherit);color:var(--ink,#161b22);
  text-align:left;cursor:pointer;line-height:1.3;
}
.tgsel__btn:hover{border-color:#cdd2da}
.tgsel__btn:focus-visible{outline:2px solid var(--link,#337ab7);outline-offset:1px}
.tgsel.is-open .tgsel__btn{border-color:var(--link,#337ab7)}
.tgsel__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgsel__btn::after{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-left:2px;
  border-right:2px solid var(--muted,#666f7b);border-bottom:2px solid var(--muted,#666f7b);
  transform:translateY(-2px) rotate(45deg);
}
.tgsel.is-open .tgsel__btn::after{transform:translateY(1px) rotate(225deg)}

.tgsel__panel{
  position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;
  background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:8px;
  box-shadow:0 8px 24px rgba(16,24,40,.12);overflow:hidden;
}
.tgsel__panel[hidden]{display:none}
/* The search box has to look like one, or nobody tries typing in it: its own
 * field on a tinted strip, with a magnifier. The icon is an inline data URI so
 * it does not depend on the Font Awesome subset having loaded. */
.tgsel__searchwrap{padding:8px;background:var(--bg-soft,#f5f6f8);border-bottom:1px solid var(--line,#e6e8ec)}
.tgsel__search{
  display:block;width:100%;padding:9px 12px 9px 34px;
  border:1px solid var(--line,#e6e8ec);border-radius:6px;background-color:#fff;
  font-size:14px;font-family:var(--body,inherit);color:var(--ink,#161b22);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666f7b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px 50%;background-size:15px 15px;
}
.tgsel__search::placeholder{color:var(--muted,#666f7b);opacity:1}
.tgsel__search:focus{
  outline:0;border-color:var(--link,#337ab7);
  box-shadow:0 0 0 3px rgba(51,122,183,.18);
}

.tgsel__list{max-height:280px;overflow-y:auto;margin:0;padding:4px;list-style:none;overscroll-behavior:contain}
.tgsel__opt{
  padding:8px 10px;border-radius:6px;font-size:14px;color:var(--body,#3f4754);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tgsel__opt[aria-selected="true"]{color:var(--ink,#161b22);font-weight:600}
.tgsel__opt.is-active{background:var(--bg-tint,#eef2f6);color:var(--ink,#161b22)}
.tgsel__opt mark{background:#fff3b0;color:inherit;padding:0;border-radius:2px}
.tgsel__empty{padding:12px;font-size:13px;color:var(--muted,#666f7b)}

@media (max-width:767px){
  .tgsel{flex:1 1 100%}
  .tgsel__list{max-height:50vh}
}