/* Person-page entry filter: one slim bar — a draggable year range plus compact place /
   type / spelling dropdowns. Replaces the old chip walls. Client-side, no reload. */
.entry-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  margin: .3rem 0 .85rem; padding: .5rem .75rem;
  background: var(--panel, #f6f2e9); border: 1px solid var(--rule, #e3ddd0);
  border-radius: 8px; font-size: .85rem;
}
.entry-filter select {
  font: inherit; padding: .22rem .45rem; max-width: 13rem; color: inherit;
  border: 1px solid var(--rule, #d8d0be); border-radius: 5px; background: var(--bg, #fff);
}
.ef-range { display: flex; align-items: center; gap: .55rem; }
.ef-lbl { white-space: nowrap; color: var(--muted, #6b6355); }
.ef-lbl output { font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; }
#ef-count { color: var(--muted, #6b6355); }

/* dual-thumb range: two range inputs overlaid on one track, plus a filled span */
.ef-slider { position: relative; width: 210px; height: 20px; }
.ef-slider::before {                       /* the empty track */
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px;
  background: var(--rule, #d8d0be); border-radius: 2px;
}
.ef-slider .ef-fill {                       /* the selected span */
  position: absolute; top: 8px; height: 4px; border-radius: 2px;
  background: var(--accent, #7c3aed); pointer-events: none;
}
.ef-slider input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.ef-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 15px; height: 15px;
  border-radius: 50%; background: var(--accent, #7c3aed); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer;
}
.ef-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent, #7c3aed); border: 2px solid #fff; cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .entry-filter { background: #26221b; border-color: #3a352b; }
  .entry-filter select { background: #1c1a15; border-color: #3a352b; }
}