/* global filter bar — second row of the sticky header */
.fbar { border-top: 1px solid var(--line); }
.fbar-inner { display: flex; align-items: center; gap: 14px; max-width: var(--maxw-wide); margin: 0 auto; padding: 10px var(--gutter); }
.fbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }

.fsel { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 30px 0 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--fg-muted); transition: border-color 0.15s, background 0.15s; max-width: 230px; }
.fsel:hover { border-color: var(--fg-faint); }
.fsel:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.fsel select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--fg); font-size: 13px; font-weight: 500; min-width: 0; max-width: 100%; text-overflow: ellipsis; cursor: pointer; padding: 8px 0; }
.fsel select:focus, .fsel select:focus-visible { outline: none; box-shadow: none; } /* the .fsel wrapper shows focus */
.fsel select option, .fsel select optgroup { background: var(--surface); color: var(--fg); }
.fsel .fsel-chev { position: absolute; right: 10px; pointer-events: none; color: var(--fg-faint); }
.fsel.is-set { border-color: var(--brand-deep); background: var(--brand-tint); }
.fsel.is-set > svg:first-child { color: var(--brand); }

.fdates { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-faint); }
.fdates input { height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--fg); font-size: 12.5px; color-scheme: dark; }
:root[data-theme='light'] .fdates input { color-scheme: light; }
.fdates input:focus { outline: none; border-color: var(--brand); }

.fchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 12px; border-radius: 10px; font-size: 12.5px; color: var(--fg-muted); background: var(--brand-tint); border: 1px solid var(--brand-deep); max-width: 320px; }
.fchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip b { color: var(--fg); font-weight: 600; }
.fchip button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--fg-muted); flex-shrink: 0; }
.fchip button:hover { background: var(--sunken); color: var(--fg); }

.freset { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.freset:hover { color: var(--fg); background: var(--raised); }

/* Wide screens: the sheet's contents sit inline in the row (display:
   contents), and its phone-only chrome is hidden. phone.css turns the same
   element into a bottom sheet under 861px. */
.fbar-more { display: contents; }
.sheet-head, .sheet-foot, .fmore, .fbar-scrim, .phone-only { display: none; }
.fmore { align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--fg); }
.fmore svg { color: var(--fg-muted); }
.fmore-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-size: 11.5px; }