/* ════════════════════════════════════════════════════════════════
 * fs-saved-filters.css · Welle 40.7 · NACHT-24
 * ════════════════════════════════════════════════════════════════
 * Saved-Filter-Bar Brand-Style.
 * Mona Sans / Inter / Geist Mono · Lime-Active · 44px Touch.
 * ════════════════════════════════════════════════════════════════ */

.fs-sf-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 20px;
  padding: 14px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line, #2A2C30);
  background: var(--bg-deep, #0F1012);
}

.fs-sf-group {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}

.fs-sf-group-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--stone, #888);
  padding-right: 4px;
  white-space: nowrap;
}

.fs-sf-group--user .fs-sf-group-label::before {
  content: '◆ ';
  color: var(--accent, #D8FF3C);
}

.fs-sf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; min-height: 32px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--line, #2A2C30);
  color: var(--stone, #888);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.fs-sf-chip:hover {
  border-color: var(--accent, #D8FF3C);
  color: var(--accent, #D8FF3C);
}
.fs-sf-chip.is-active {
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  border-color: var(--accent, #D8FF3C);
}
.fs-sf-chip.is-active .fs-sf-chip-ico { color: var(--ink, #0A0A0C); }

.fs-sf-chip-ico {
  font-size: 0.78rem; line-height: 1;
  color: var(--accent, #D8FF3C);
  flex-shrink: 0;
}
.fs-sf-chip-lbl {
  font-size: 0.66rem; line-height: 1;
}

.fs-sf-chip-del {
  background: transparent; border: 0;
  padding: 0 0 0 4px; margin-left: 2px;
  color: var(--stone, #888);
  font-family: inherit; font-size: 0.8rem;
  cursor: pointer; line-height: 1;
  transition: color 0.15s;
}
.fs-sf-chip-del:hover {
  color: #FF6464;
}
.fs-sf-chip.is-active .fs-sf-chip-del {
  color: rgba(10, 10, 12, 0.6);
}
.fs-sf-chip.is-active .fs-sf-chip-del:hover {
  color: var(--ink, #0A0A0C);
}

/* Save-Button (User-Group am Ende) */
.fs-sf-chip--save {
  border-style: dashed;
  color: var(--mist, #B0B3B8);
}
.fs-sf-chip--save:hover {
  border-style: solid;
}

/* Mobile · kompakter */
@media (max-width: 768px) {
  .fs-sf-bar {
    padding: 12px 16px;
    gap: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .fs-sf-group { flex-wrap: nowrap; }
  .fs-sf-group-label { font-size: 0.55rem; }
  .fs-sf-chip { padding: 0 10px; min-height: 30px; }
  .fs-sf-chip-lbl { font-size: 0.6rem; }
}