/* ============================================================================
   FILTER GROUP (sidebar) — single source of truth.
   Canonical CSS for the sidebar filter block: .filter-group, its title +
   "vše" reset, the .filter-item rows (custom checkbox glyph + chip + count) and
   their hover/active/focus-ring states. Shared by comp-filter-group.html and
   any future consumer. Pair with _filter-group.js. Import AFTER
   colors_and_type.css + _chips.css.
   ============================================================================ */

.filter-group {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 14px 16px;
}
.filter-group__title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-fg-secondary);
  margin: 0 0 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.filter-group__title .reset {
  all: unset; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--gov-color-primary-500); text-transform: none;
  padding: 2px 4px; border-radius: 3px;
  /* Animated appear/disappear (see `[hidden]` below). transform-origin right so
     it scales toward its right-aligned home. The system reduced-motion policy
     (colors_and_type.css) collapses these durations automatically. */
  opacity: 1; transform: none; transform-origin: right center;
  transition: opacity 190ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              color 120ms ease;
}
/* `all: unset` resets display to inline, which overrides the UA
   `[hidden] { display:none }` rule. Hide with `visibility` rather than
   `display` so the button's box stays reserved in the flex line — otherwise
   the title row's height drops ~1px when the button is absent and the whole
   group jumps as it appears/disappears. visibility:hidden also drops it from
   tab order + AT, like `display:none` would. The reset is a FLEX ITEM (the
   title is display:flex), so it's blockified — transform applies despite the
   inline display. On HIDE, visibility flips only AFTER the 190ms fade (delayed
   transition) so the fade-out is visible; on SHOW it returns instantly. */
.filter-group__title .reset[hidden] {
  display: inline; pointer-events: none;
  opacity: 0; transform: scale(0.82) translateY(-1px); visibility: hidden;
  transition: opacity 150ms ease, transform 180ms ease, visibility 0s linear 190ms;
}
.filter-group__title .reset:hover,
.filter-group__title .reset[data-state="hover"] { color: var(--gov-color-primary-700); text-decoration: underline; }
.filter-group__title .reset:active,
.filter-group__title .reset[data-state="pressed"] { color: var(--gov-color-primary-800); }
.filter-group__title .reset:focus-visible,
.filter-group__title .reset.is-focus {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35));
}

/* ── Filter row ───────────────────────────────────────────────────────
   The whole <label> is the hit-target — checkbox glyph + chip + count.
   Hover / active tint the row; keyboard focus on the inner input lifts
   a 3 px ring on the whole row via `:has(input:focus-visible)`. */
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px;
  cursor: pointer;
  font-size: 13.5px; color: var(--color-fg-default);
  position: relative;
  /* The whole row is a click-to-toggle hit target — rapid double-clicks (or a
     small drag while pressing) would otherwise select the chip + count text.
     Suppress selection on the label so quick toggling never highlights text. */
  user-select: none; -webkit-user-select: none;
  /* box-shadow in the base transition so the focus ring blooms; spring
     easing comes from the focus override below. Same recipe as
     comp-inputs / comp-buttons. */
  transition: background-color 100ms linear,
              box-shadow 140ms ease-out,
              opacity 200ms ease-out;
}
.filter-item:hover,
.filter-item[data-state="hover"] { background: var(--gov-color-primary-50); }
.filter-item.is-active { background: var(--gov-color-primary-50); }
/* Pressed — deeper well so a click registers; placed after .is-active so it
   wins on active rows too. [data-state="pressed"] is for the focus playground. */
.filter-item:active,
.filter-item[data-state="pressed"] { background: var(--gov-color-primary-100); }
body[data-theme="dark"] .filter-item:active,
body[data-theme="dark"] .filter-item[data-state="pressed"] { background: rgba(255,255,255,0.07); }
.filter-item:has(input:focus-visible),
.filter-item.is-focus {
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35));
  background: var(--gov-color-primary-50);
  /* Raise the focused face above sibling active backgrounds — rows are
     `position: relative` siblings, so a later sibling's `.is-active` fill
     paints over the bottom of this ring. z-index:1 lifts the focused row
     above all auto/0 siblings. Tooltips append to <body> with a far higher
     z-index, so they still sit above the ring. */
  z-index: 1;
  /* Focus-ring bloom — pattern shared with comp-inputs / comp-buttons. */
  transition: background-color 100ms linear,
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Truly-focused row lifts above forced-focus siblings (playground forces
   .is-focus on every row) so its real ring renders on top. */
.filter-item:has(input:focus-visible) { z-index: 2; }

/* ── Custom checkbox glyph (matches comp-checkbox-radio.html) ──────── */
.filter-item > input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  margin: 0; flex: none;
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 100ms linear, border-color 100ms linear, box-shadow 140ms ease-out;
  position: relative;
}
.filter-item > input:hover:not(:disabled),
.filter-item[data-state="hover"] > input:not(:disabled) { border-color: var(--gov-color-primary-500); }
.filter-item:active > input:not(:disabled),
.filter-item[data-state="pressed"] > input:not(:disabled) { border-color: var(--gov-color-primary-600); }
.filter-item > input:checked {
  background-color: var(--gov-color-primary-500);
  border-color: var(--gov-color-primary-500);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8l3 3 6-6' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.filter-item > input:focus-visible,
.filter-item.is-focus > input {
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35));
  outline: none;
}

.filter-item__body { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.filter-item .ct { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-fg-tertiary); flex: none; font-variant-numeric: tabular-nums; }
/* ↑ Animated-number timing: facet counts now ride the system-wide deliberate
   base (the old 200ms "subtle" override was retired with the settled defaults,
   Jun 2026); motion/effect/limit attrs are stamped by _filter-group.js. */
.filter-item.is-active .ct { color: var(--gov-color-primary-700); font-weight: 500; }
/* Live FACET COUNT: a consumer can recompute each option's `.ct` against the
   OTHER active filters (AND across groups, OR within a group). An option that
   would yield nothing given the rest of the selection gets `.is-zero` — it dims
   to read as "adds nothing" while staying selectable; opacity transitions so a
   live recount settles calmly rather than blinking. */
.filter-item.is-zero { opacity: 0.42; }
.filter-item.is-zero .ct { color: var(--color-fg-tertiary); }