/* Tag filter box (tagging/templates/tagging/filter_bar.html) and tag pages. */
.tf-bar{max-width:760px;margin:0 auto 30px;text-align:left;font-size:15px}
.tf-box{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;
  padding:6px 40px 6px 40px;border:1px solid #cfcfcf;border-radius:23px;background:#fff;cursor:text;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tf-box:focus-within{border-color:#888;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.tf-icon{position:absolute;left:16px;top:15px;color:#999;font-size:14px}
.tf-pills{display:contents}
.tf-pill{display:inline-flex;align-items:center;gap:2px;background:#343a40;color:#fff;border-radius:14px;
  padding:2px 4px 2px 11px;font-size:14px;line-height:22px;white-space:nowrap}
.tf-x{border:0;background:none;color:#ccc;font-size:17px;line-height:1;padding:0 5px;cursor:pointer;border-radius:50%}
.tf-x:hover,.tf-x:focus{color:#fff;background:rgba(255,255,255,.18)}
.tf-input{flex:1 1 160px;min-width:120px;border:0;outline:0;padding:4px 2px;font-size:15px;background:transparent}
.tf-reset{position:absolute;right:10px;top:9px;width:28px;height:28px;border:0;border-radius:50%;
  background:none;color:#888;font-size:20px;line-height:1;cursor:pointer}
.tf-reset:hover{background:#f0f0f0;color:#333}
.tf-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px 0;list-style:none;
  background:#fff;border:1px solid #d5d5d5;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);
  max-height:340px;overflow-y:auto}
.tf-head{padding:4px 18px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#999}
.tf-opt{display:flex;justify-content:space-between;gap:16px;padding:7px 18px;cursor:pointer}
.tf-opt.tf-active{background:#f1f3f5}
.tf-opt-name{color:#222}
.tf-opt-meta{color:#999;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tf-meta{margin-top:8px;text-align:center;color:#777;font-size:13px}
.tf-status{font-variant-numeric:tabular-nums}
[data-tf-count]{font-size:.55em;color:#888;font-weight:400;margin-left:8px}
@media (max-width:576px){.tf-bar{margin-bottom:20px}.tf-box{padding-left:34px}.tf-icon{left:13px}}

/* Tag pages (/tags/) */
.tf-chips{display:flex;flex-wrap:wrap;gap:5px}
.tf-chip{border:1px solid #d5d5d5;background:#f7f7f7;color:#333;border-radius:14px;padding:2px 10px;font-size:13px;line-height:20px}
.tf-chip .tf-n{color:#888;font-size:11px;margin-left:2px}
.tg-index{max-width:1000px;margin:0 auto;text-align:left}
.tg-index h3{font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:#777;margin:26px 0 8px}
.tg-index a.tf-chip{text-decoration:none}
.tg-index a.tf-chip:hover{border-color:#888}
.tg-list{max-width:1000px;margin:0 auto;text-align:left}
.tg-list li{margin:6px 0}
.tg-list .tg-meta{color:#777;font-size:13px}

/* Co-author pills and suggestions */
.tf-pill-author{background:#e7eef7;color:#1d3c5e}
.tf-pill-author .tf-x{color:#5b7593}
.tf-pill-author .tf-x:hover,.tf-pill-author .tf-x:focus{color:#1d3c5e;background:rgba(29,60,94,.12)}
.tf-pill-icon{font-size:11px;margin-right:6px;opacity:.75}
.tf-opt-icon{font-size:11px;color:#8aa0b8;margin-right:8px}