/* ============================================================
   Filter Tabs — secondary, lighter pill row for narrowing a list
   by status, each pill showing a label + live count badge.

   Distinct from .tabs (primary view switch with underline/brand
   accent): filter-tabs is a quieter, lower-weight control meant to
   sit on the row *below* the primary tabs, so the two read as a
   clear primary → secondary hierarchy. Active pill = soft muted
   fill (no brand colour, leaving orange to the primary tabs).

   Promoted 2026-06-15 from E-Shop F3 (status filter, was a <select>).

   Anatomy:
     .filter-tabs (role="tablist")
       .filter-tabs__item            (button, role="tab")
         <text>
         .filter-tabs__count         (count badge)
       .filter-tabs__item--active    (muted fill + foreground text)

   The active state + count text are driven by inline JS on the
   consuming page (see e-shop.html).
   ============================================================ */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
.filter-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  box-sizing: border-box;
  height: var(--sp-32);
  padding: 0 var(--sp-12);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--foreground-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  cursor: pointer;
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}
/* `display:inline-flex` above outranks the UA stylesheet's `[hidden]{display:none}`,
   so a consumer setting el.hidden would otherwise get a still-visible chip. Consumers
   hide zero-match filters this way (projects.html scopes release modes to the active
   status tab), so honour the attribute explicitly. (2026-07-27) */
.filter-tabs__item[hidden] { display: none; }
.filter-tabs__item:hover {
  background: var(--muted);
  color: var(--foreground);
}
.filter-tabs__item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* 2026-07-27 Q8 裁決 A：已選＝品牌橘 tint（原中性 --muted 灰底）。
   這條原本只有加 .filter-tabs--brand 的頁面才是橘，16 個頁面裡 7 個是灰的——現在基底就是橘，
   --brand 修飾類只剩「計數不加泡泡」這一項差異。*/
.filter-tabs__item--active {
  background: var(--selected-surface);
  color: var(--selected-ink);
  font-weight: var(--fw-medium);
}
.filter-tabs__item--active:hover { background: var(--selected-surface-hover); color: var(--selected-ink); }
.filter-tabs__count {
  font-size: var(--fs-11);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--foreground) 7%, var(--card));
  border-radius: var(--radius-pill);
  padding: 1px var(--sp-6);
  min-width: 16px;
  text-align: center;
}
/* 已選的計數泡泡跟著走橘：底用橘 tint 再深一階，字吃 --selected-ink（亮色版是壓深的 #8F4E00，
   不是 --primary——白底上的 --primary 只有 1.92:1）。*/
.filter-tabs__item--active .filter-tabs__count {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--selected-ink);
}

/* ── .filter-tabs--brand — 2026-07-27 Q8 裁決 A 後大幅縮編：橘色已選態變成全站基底，
     這個修飾類原本的四條顏色覆寫（橘底／橘字／橘 hover／橘計數）全部與基底重複，已刪。
     只留下它真正獨有的那一項：計數不套泡泡、平鋪顯示。9 個消費頁的 class 不必動。
     （原始意圖見 2026-06-22；當時橘是 opt-in，現在是預設。）── */
.filter-tabs--brand .filter-tabs__count {
  background: transparent;
  padding: 0;
  min-width: 0;
  color: var(--muted-foreground);
}
.filter-tabs--brand .filter-tabs__item--active .filter-tabs__count {
  background: transparent;
  color: var(--selected-ink);
}

/* ── .filter-tabs--source — opt-in variant: the active pill takes the COLOUR OF
     ITS OWN ITEM, passed per-button as `--dot` (e.g. style="--dot:var(--chart-2)").
     Same soft-tint recipe as --brand (12% fill + coloured label), but instead of
     one brand orange each item tints with the colour it represents, so the
     selection matches the series it filters. Built for Earnings F5 revenue-source
     filter, where each source already owns a colour shared by its chart line and
     the "Revenue by source" list dot. Set --dot on the item that has no colour of
     its own (e.g. "All") to the brand orange. (2026-07-25)

     Anatomy adds an optional leading colour dot:
       .filter-tabs__item[style="--dot:…"]
         .filter-tabs__dot   (8px colour dot, reads --dot)
         <text>
     ── */
.filter-tabs__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--dot, var(--muted-foreground));
  display: inline-block;
  flex: none;
}
.filter-tabs--source .filter-tabs__item--active {
  background: color-mix(in srgb, var(--dot, var(--primary)) 12%, var(--card));
  color: var(--dot, var(--primary));
}
.filter-tabs--source .filter-tabs__item--active:hover {
  background: color-mix(in srgb, var(--dot, var(--primary)) 18%, var(--card));
}