/* Filter layer 09 — browse filters on the v0.4 attributes, 2026-09-22.
   Direction 05 rules apply: flat, zero radius, zero shadow, one accent, and
   the hairline does the work. The bar is a <details> so a first-time visitor
   sees the same hero they always did and the controls are one tap away; it
   opens itself whenever a filter is on, so an active narrowing is never
   hidden behind a closed summary. Roll back by deleting this file's one
   <link> line in layout.php — the markup degrades to plain form controls. */

.filterbar { flex-basis: 100%; margin: 4px 0 0; font-size: .85rem; }

.filterbar > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  color: var(--mid); border-bottom: 1px solid var(--rule);
  padding: 2px 0 3px; width: fit-content;
}
.filterbar > summary::-webkit-details-marker { display: none; }
.filterbar > summary::after { content: "+"; color: var(--muted); }
.filterbar[open] > summary::after { content: "\2212"; }   /* minus */
.filterbar > summary:hover { color: var(--ink); }

/* how many are on, so a collapsed bar still tells the truth */
.filterbar .fcount {
  background: var(--accent); color: #fff;
  font-size: .72rem; line-height: 1; padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}

.filterrow {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end;
  margin-top: 12px; padding: 14px 0 2px; border-top: 1px solid var(--rule);
}
.filterrow > label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.filterrow > label.chk {
  flex-direction: row; align-items: center; gap: 7px;
  font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  padding-bottom: 9px;
}
.filterrow select {
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); font: inherit; font-size: .85rem; color: var(--ink);
  min-width: 11rem;
}
.filterrow .clearf {
  color: var(--accent-ink); font-size: .8rem; padding-bottom: 10px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* On a phone the row is the whole width and the selects fill it, so nothing
   has to be aimed at. */
@media (max-width: 560px) {
  .filterrow { gap: 10px 12px; }
  .filterrow > label { width: 100%; }
  .filterrow select { min-width: 0; width: 100%; }
  .filterrow > label.chk { width: auto; padding-bottom: 0; }
}