/* --- Schritt „Filter“ der Scan-Seite: Aktiv-Leiste, Reiter, Bereiche (Ä-65, DESIGN 7 „Scans“) --
   Oben jeder gesetzte Filter als kleiner Chip (mit Skript mit ×), rechts „Alle zurücksetzen“;
   darunter drei Reiter im Segment-Stil über die volle Breite, je mit der Zahl seiner aktiven
   Filter (Akzent nur, wenn etwas aktiv ist). Ohne Skript fehlen die Reiter, und die Bereiche
   stehen mit ihren Zwischenüberschriften untereinander. */

.filter-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 22px;
}

.filter-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-active__chips:empty {
  display: none;
}

.chip.filter-chip {
  max-width: 100%;
  padding: 2px 8px;
  font: 500 0.75rem/1.125rem var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.filter-chip:has(.filter-chip__remove) {
  padding-right: 2px;
}

.filter-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mit Skript ist der Text ein Knopf: er öffnet den Reiter des Filters und setzt den Fokus ins Feld. */
button.filter-chip__text {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

button.filter-chip__text:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.filter-chip__remove {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.filter-chip__remove:hover {
  background: rgba(240, 174, 102, 0.2);
}

.filter-chip__remove:focus-visible,
button.filter-chip__text:focus-visible,
.scan-limits__choice:focus-visible,
.filter-active__clear:focus-visible,
.filter-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.filter-active__none {
  margin: 0;
  color: var(--text-3);
  font: var(--text-label);
}

.scan-tabs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.filter-active__clear {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-2);
  font: var(--text-label);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  cursor: pointer;
}

.filter-active__clear:hover {
  color: var(--text-1);
}

/* Drei Reiter, gleich breit, solange ihr Text passt (sonst bekommt der längste etwas mehr). */
.segmented.filter-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
}

.segmented--sm .filter-tabs__tab {
  flex: 1 1 0;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--space-2);
  cursor: pointer;
}

.filter-tabs__tab[aria-selected="true"] {
  border-color: var(--border);
  background: var(--surface-active);
  color: var(--text-1);
}

.filter-tabs__count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: rgba(210, 102, 42, 0.2);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Die Bereiche: Branche, Größe, Algorithmus – je mit Zwischenüberschrift und einer kurzen Zeile
   mit Info-Symbol (Ä-33) darunter. Mit Reitern nennt der Reiter den Bereich; sichtbar bleibt nur
   die Zeile. */
.scans__group { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.scans__step > .scans__group + .scans__group { margin-top: var(--space-2); }
.scans__group-title { margin: 0; color: var(--text-2); font-size: 0.8125rem; font-weight: 600; }
.scans__group-lead { margin: 0; color: var(--text-2); font-size: 0.75rem; line-height: 1rem; }
.scan-tabs[data-tabbed] > .scans__group { margin-top: 0; }

.scan-tabs[data-tabbed] .scans__group-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Größe: Kurs und Volumen nebeneinander, auf dem Telefon untereinander. */
.scan-limits__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (width < 640px) {
  .scan-limits__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Schnellwahl der Marktkapitalisierung: drei gleich breite Segmente in einer Zeile, das gewählte
   hell (aria-pressed). Die Zeile misst ihre eigene Breite (Container): Wird es eng, wird die
   Schrift kleiner, und erst ganz eng bleibt nur „Small“/„Mid“/„Large“ (Wert in aria-label und
   Tooltip). Umbrechen oder abschneiden soll nichts. */
.segmented.scan-limits__quick {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  container-type: inline-size;
}

.segmented--sm .scan-limits__choice {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--space-1);
  font-size: 0.75rem;
  cursor: pointer;
}

.scan-limits__short { display: none; }

@container (width < 318px) {
  .segmented--sm .scan-limits__choice { font-size: 0.6875rem; }
}

@container (width < 292px) {
  .scan-limits__long { display: none; }
  .scan-limits__short { display: inline; }
}

/* Algorithmus (Ä-54): Beschriftung über dem Feld wie bei Größe, dahinter Grenze bzw. Einheit. */
.scan-filters__state { margin: 0; }
.scan-filters__field { display: grid; gap: 6px; margin: 0; }
.scan-filters__switch, .scan-filters__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); font: var(--text-label); }
.scan-filters__value { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: 0.8125rem; }
.scan-filters__help { margin: 0; }