/* TaskBlink Data, the filter panel, the active chips row and the Save as smart list popover
   (DESIGN-BRIEF 2.12, the Filters artboard; BUILD-PLAN 4 A3). Tokens only (tb.css), so dark mode follows.
   Every control is a 44 px target: a smaller visible control carries a 44 x 44 hit area. */

/* ------------------------------------------------------------------ *
 * The panel: a 400 wide sheet on the right, below the top bar, with no scrim (the cards behind it keep
 * updating as filters change). On a phone it rises from the bottom over a scrim.
 * ------------------------------------------------------------------ */
.tb-fpanel {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 70;
  width: min(400px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: var(--sh-modal), 0 0 0 1px rgba(14,18,48,.06);
  animation: tb-sheet-in var(--t-block) var(--ease);
}
.tb-fpanel:focus { outline: none; }
.tb-fpanel-scrim { display: none; }
.tb-fpanel__grab { display: none; }
.tb-fpanel__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 4px 24px; }
.tb-fpanel__title { margin: 0; font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.tb-fpanel__title:focus { outline: none; }
.tb-fpanel__tools { display: flex; align-items: center; gap: 2px; }
.tb-fpanel__clear {
  height: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none;
  font: 500 14px/1 var(--font); color: var(--brand-text); cursor: pointer;
}
.tb-fpanel__clear:hover:not(:disabled) { color: var(--brand-ink); background: var(--surface-2); }
.tb-fpanel__clear:disabled { color: var(--ink-3); cursor: default; }
.tb-fpanel__clear:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-fpanel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }

.tb-fp__sec { padding: 14px 0 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.tb-fp__sec:last-child { border-bottom: 0; }
.tb-fp__label {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font: 600 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.tb-fp__label .tb-icon { width: 14px; height: 14px; }
.tb-fp__item { display: flex; flex-direction: column; gap: 10px; }
.tb-fp__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.tb-fp__row--select { margin-top: 2px; }
.tb-fp__name { font: 500 13px/1.3 var(--font); color: var(--ink); }
.tb-fp__val { font: 400 12.5px/1 var(--font); color: var(--ink-3); }
.tb-fp__val.is-on { font: 600 12.5px/1 var(--font-mono); color: var(--brand-ink); }
.tb-fp__note { margin: 14px 0 0; font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }

/* filter chips: 32 tall in rows 12 apart, so each 44 hit area stays its own */
.tb-fp__chips { display: flex; flex-wrap: wrap; gap: 12px 8px; }
.tb-fp__line { padding: 0 12px 0 10px; }
.tb-fp__line .tb-icon { width: 12px; height: 12px; }
.tb-fp__more {
  position: relative; height: 32px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 500 13px/1 var(--font); color: var(--brand-text);
}
.tb-fp__more::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
}
.tb-fp__more:hover { color: var(--brand-ink); text-decoration: underline; }
.tb-fp__more:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--r-sm); }

/* Google reviews: the select, brand tint once a value is on */
.tb-fp__select { width: auto; min-width: 140px; height: 44px; min-height: 44px; font: 500 13px/1 var(--font); }
.tb-fp__select.is-on { border-color: var(--brand-line); background-color: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }

/* The two-thumb range: track 4 px, filled brand, each 20 px thumb inside its own 44 x 44 slider */
.tb-range { position: relative; height: 20px; margin: 4px 0; touch-action: none; }
.tb-range__track { position: absolute; left: 10px; right: 10px; top: 8px; height: 4px; border-radius: var(--pill); background: var(--line); }
.tb-range__fill { position: absolute; top: 8px; height: 4px; border-radius: var(--pill); background: var(--brand); opacity: 0; }
.tb-range__fill.is-on { opacity: 1; }
.tb-range__hit {
  position: absolute; top: -12px; left: -12px; width: 44px; height: 44px; min-height: 44px; cursor: pointer;
  touch-action: none; outline: none; -webkit-tap-highlight-color: transparent;
}
.tb-range__knob {
  position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; border-radius: var(--pill);
  background: #FFFFFF; border: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(14,18,48,.12), 0 1px 1px rgba(14,18,48,.04);
  transition: box-shadow var(--t-hover) var(--ease);
}
.tb-range__hit:hover .tb-range__knob { border-color: var(--brand-line); }
.tb-range__hit:focus-visible .tb-range__knob { box-shadow: var(--ring-brand); }

/* the sticky footer: the live count and the two actions */
.tb-fpanel__foot {
  flex: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 24px 20px;
  border-top: 1px solid var(--line); border-radius: 0 0 0 var(--r-xl); background: var(--surface);
}
.tb-fpanel__count { margin: 0; font: 600 15px/22px var(--font); color: var(--ink); }
.tb-fpanel__count .tb-mono { font-weight: 600; }
.tb-fpanel__actions { display: flex; gap: 10px; }
.tb-fpanel__save { flex: 1; }
.tb-fpanel__save .tb-icon { color: var(--ink-3); }
.tb-fpanel__save[aria-expanded="true"] { border-color: var(--brand-text); box-shadow: 0 0 0 3px rgba(239,6,192,.14); }

@media (max-width: 640px) {
  .tb-fpanel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; animation-name: tb-sheet-up;
  }
  .tb-fpanel-scrim { display: block; position: fixed; inset: 0; z-index: 69; background: var(--scrim-modal); animation: tb-fade-in var(--t-block) var(--ease); }
  .tb-fpanel__grab { display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--pill); background: var(--line-strong); }
  .tb-fpanel__head { padding: 10px 8px 0 16px; }
  .tb-fpanel__body { padding: 0 16px; }
  .tb-fpanel__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
}

/* ------------------------------------------------------------------ *
 * The active chips row, after the tag (brand filter chips with a remove button, and Clear all)
 * ------------------------------------------------------------------ */
.tb-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; min-height: 36px; }
.tb-fchip {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; max-width: 100%; padding: 0 2px 0 12px;
  border-radius: var(--pill); background: var(--brand-tint); border: 1px solid var(--brand-line); color: var(--brand-ink);
  font: 500 13px/1 var(--font); white-space: nowrap;
}
.tb-fchip__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-fchip__x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px;
  margin: -8px; padding: 0; border: 0; border-radius: var(--pill); background: none; color: var(--brand-ink); cursor: pointer;
}
.tb-fchip__x .tb-icon { width: 14px; height: 14px; border-radius: var(--pill); }
.tb-fchip__x:hover .tb-icon { background: rgba(156,5,121,.10); }
.tb-fchip__x:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.tb-fchips__clear {
  height: 44px; min-height: 44px; margin: -4px 0; padding: 0 8px; border: 0; border-radius: var(--r-md); background: none;
  font: 500 13px/1 var(--font); color: var(--brand-text); cursor: pointer;
}
.tb-fchips__clear:hover { color: var(--brand-ink); text-decoration: underline; }
.tb-fchips__clear:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* ------------------------------------------------------------------ *
 * Save as smart list (360 wide popover, sh-pop)
 * ------------------------------------------------------------------ */
.tb-save-pop { width: 360px; }
.tb-save { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tb-save__label { font: 600 13px/18px var(--font); color: var(--ink); }
.tb-save__input { font-weight: 500; }
.tb-save__follow { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.tb-save__switch { justify-content: space-between; min-height: 44px; }
.tb-save__switch .tb-switch__input { right: 0; top: 50%; margin-top: -13px; }
.tb-save__switch-words { font: 600 14px/1.3 var(--font); color: var(--ink); }
.tb-save__help { margin: 0; font: 400 12.5px/1.45 var(--font); color: var(--ink-3); }
.tb-save__error { margin: 0; }
.tb-save__foot { margin-top: 6px; display: flex; justify-content: flex-end; gap: 8px; }