/* Glass dropdown pills with a menu (2026-11), shared by Things (Category, Sort), Projects (Category) and
   Articles (Topic). The markup: <label class="tg-select"><span class="tg-select-label">…</span><select>…</select></label>;
   without JavaScript the native <select> shows in the same pill. With it (things.js, select-menu.js) the <select> is
   hidden and a button + glass list replace it. Colours come from the style.css tokens (light and dark). */
.tg-select { position: relative; display: grid; gap: 5px; }
.tg-select-label { padding-left: 16px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tg-select select, .tg-dd-btn {
  -webkit-appearance: none; appearance: none; color-scheme: light;
  min-width: 190px; height: 46px; padding: 0 42px 0 18px; border: 0; border-radius: 999px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: inherit; font-size: .94rem; font-weight: 700; color: var(--ink); cursor: pointer;
  background: linear-gradient(160deg, var(--glass-top, rgba(255, 255, 255, .66)), var(--glass-bottom, rgba(255, 255, 255, .3)));
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge, #fff), 0 6px 16px -10px rgba(20, 33, 61, .45);
}
.tg-select::after {   /* the chevron, in the text colour */
  content: ""; position: absolute; right: 16px; bottom: 17px; width: 12px; height: 12px; pointer-events: none;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tg-select select:hover, .tg-dd-btn:hover, .tg-dd.is-open .tg-dd-btn { background: linear-gradient(180deg, var(--lens-top, #fff), var(--lens-bottom, rgba(255, 255, 255, .6))); }
.tg-select select:focus-visible, .tg-dd-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tg-apply { height: 46px; padding: 0 18px; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; color: var(--ink); }
.tg-apply[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .tg-select select { color-scheme: dark; } }

/* The menus that replace the native dropdown lists (things.js, select-menu.js): a nearly solid glass card under the button,
   a check on the current choice, the number of items beside each category */
.tg-native { display: none; }
.tg-select::after { transition: transform .2s ease; }
.tg-dd.is-open::after { transform: rotate(180deg); }
.tg-dd.is-open { z-index: 20; }
.tg-dd-list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: max(100%, 220px); max-height: min(60vh, 360px); overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; border-radius: 20px;
  background: linear-gradient(160deg, var(--glass-top, rgba(255, 255, 255, .66)), var(--glass-bottom, rgba(255, 255, 255, .3))), var(--card);
  box-shadow: inset 0 1px 0 var(--glass-edge, #fff), 0 0 0 1px var(--line), 0 22px 44px -18px rgba(20, 33, 61, .45);
  transform-origin: top left;
  animation: tg-dd-in .16s cubic-bezier(.2, .7, .2, 1);
}
.tg-dd-list:focus { outline: none; }
.tg-dd-list:focus-visible [role="option"].is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.tg-dd-list[hidden] { display: none; }
@keyframes tg-dd-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.tg-dd-list [role="option"] {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 10px; border-radius: 14px;
  color: var(--ink); font-size: .92rem; font-weight: 600; cursor: pointer; user-select: none;
}
.tg-dd-list [role="option"].is-active { background: var(--accent-soft); }
.tg-dd-check { flex: none; width: 16px; height: 16px; color: var(--accent); visibility: hidden; }
.tg-dd-list [aria-selected="true"] .tg-dd-check { visibility: visible; }
.tg-dd-list [aria-selected="true"] { font-weight: 800; }
.tg-dd-text { flex: 1 1 auto; white-space: nowrap; }
.tg-dd-count { flex: none; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; }
@media (prefers-color-scheme: dark) {
  .tg-dd-list { box-shadow: inset 0 1px 0 var(--glass-edge, rgba(255, 255, 255, .2)), 0 0 0 1px var(--line), 0 22px 44px -18px rgba(0, 0, 0, .8); }
  .tg-dd-check { color: color-mix(in srgb, var(--accent) 60%, #fff); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-dd-list { animation: none; }
  .tg-select::after { transition: none; }
}

/* Projects and Articles: the filter form (select-menu.js hides the Apply button and goes to the page as soon as you choose) */
.fsel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 8px; }