/* ==========================================================================
   Filter bar — Ops Console UI Kit
   Reads tokens.css only. GSAP owns the transform on .fbar__seg-indicator,
   .fbar__chip and .fbar__pop, so none of them carries a CSS transform: a
   CSS `left` under a measured `x` doubles the offset, which is why the
   indicator sits at left:0 and is placed entirely from JS.
   ========================================================================== */

.fbar__head { flex-wrap: wrap; }
.fbar__body { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- segmented time range ---------- */

.fbar__seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.fbar__seg-indicator {
  position: absolute;
  left: 0;                    /* placement is `x` from measurement — never `left` */
  top: var(--sp-1);
  bottom: var(--sp-1);
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-strong);
  pointer-events: none;
}

.fbar__seg-btn {
  position: relative;
  z-index: 1;
  min-width: var(--sp-7);
  height: var(--control-h-sm);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) ease;
}
.fbar__seg-btn[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.fbar__seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .fbar__seg-btn:hover { color: var(--ink); }
}

/* ---------- chips ---------- */

.fbar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
}
.fbar__chips[hidden] { display: none !important; }

.fbar__chip {
  --chip-ink: var(--accent);
  --chip-wash: var(--accent-wash);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--control-h-sm);
  padding: 0 var(--sp-1) 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--chip-wash);
  color: var(--chip-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.fbar__chip[hidden] { display: none !important; }
.fbar__chip[data-fbar-tone="danger"] { --chip-ink: var(--danger); --chip-wash: var(--danger-wash); }
.fbar__chip[data-fbar-tone="warn"] { --chip-ink: var(--warn); --chip-wash: var(--warn-wash); }
.fbar__chip[data-fbar-tone="ok"] { --chip-ink: var(--ok); --chip-wash: var(--ok-wash); }
.fbar__chip[data-fbar-tone="info"] { --chip-ink: var(--info); --chip-wash: var(--info-wash); }

.fbar__chip-kind { color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fbar__chip-value { color: var(--chip-ink); font-weight: 500; }

.fbar__chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.fbar__chip-x svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.25; }
.fbar__chip-x:hover { background: var(--surface-hover); color: var(--ink); }
.fbar__chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fbar__empty { color: var(--ink-faint); font-size: var(--text-sm); }
.fbar__empty[hidden] { display: none !important; }

/* ---------- actions + popover ---------- */

.fbar__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fbar__add-wrap { position: relative; }
.fbar__summary { margin-left: auto; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }

.fbar__pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--sp-2));
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  width: max-content;
  max-width: min(520px, 86vw);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-2);
}
.fbar__pop[hidden] { display: none !important; }

.fbar__pop-group { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fbar__pop-label {
  padding-bottom: var(--sp-1);
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
}

.fbar__opt {
  display: flex; align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-2);
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit; font-family: var(--font-mono); font-size: var(--text-xs);
  text-align: left;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.fbar__opt:hover { background: var(--surface-hover); color: var(--ink); }
.fbar__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fbar__opt[aria-disabled="true"] {
  color: var(--ink-faint);
  cursor: default;
  text-decoration: line-through;
}
.fbar__opt[aria-disabled="true"]:hover { background: transparent; color: var(--ink-faint); }

@media (max-width: 640px) {
  .fbar__pop { grid-template-columns: minmax(0, 1fr); max-width: min(300px, 86vw); }
  .fbar__summary { margin-left: 0; width: 100%; }
}

@media (pointer: coarse) {
  .fbar__seg-btn { min-height: var(--control-h); }
  .fbar__chip { height: var(--control-h); }
  .fbar__chip-x { width: var(--control-h-sm); height: var(--control-h-sm); }
  .fbar__opt { min-height: var(--control-h); }
}