/* Funnel browser: tapered stage bands that act as a filter */
.browse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-m); font-size: var(--step--1); color: var(--ink-2); }
.funnel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; height: clamp(170px, 19vw, 230px); margin-bottom: var(--space-s); }
.fseg { position: relative; border: 0; padding: 0; background: var(--surface); color: var(--ink); cursor: pointer; clip-path: polygon(0 var(--a), 100% var(--b), 100% calc(100% - var(--b)), 0 calc(100% - var(--a)));
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.fseg:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.fseg:last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.fseg:hover { background: var(--raised); background: color-mix(in srgb, var(--surface) 80%, var(--ink) 6%); }
.fseg[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.fseg.empty0 { background: repeating-linear-gradient(135deg, var(--surface) 0 7px, var(--hover) 7px 8px); color: var(--ink-3); }
.fseg .fs-name { font-size: var(--step--1); font-weight: 600; letter-spacing: -0.01em; padding: 0 6px; }
.fseg .fs-n { font-family: var(--font-num); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.fseg .fs-sub { font-size: var(--step--2); opacity: 0.7; }
.fseg .fs-dots { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; max-width: 70%; min-height: 8px; }
.fseg .fs-dots i { width: 8px; height: 8px; border-radius: 50%; }
.fseg:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
.fsel { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-m); }
.fsel-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fsel-h b { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.fsel-h span { color: var(--ink-2); font-size: var(--step--1); }
@media (max-width: 700px) {
  .funnel { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(7, minmax(58px, auto)); height: auto; gap: 3px; }
  .fseg { clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, calc(100% - var(--b)) 100%, var(--b) 100%); flex-direction: row; gap: 10px; padding: 10px 0; }
  .fseg:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; } .fseg:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .fseg .fs-n { font-size: var(--step-1); } .fseg .fs-dots { display: none; }
}
.ffacet { display: inline-flex; align-items: center; height: 32px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1.5px var(--line-2); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.ffacet:hover { box-shadow: var(--shadow-1), 0 0 0 1.5px var(--ink-3); }
.ffacet .ff-main { border: 0; background: none; color: inherit; height: 100%; display: inline-flex; align-items: center; gap: 9px; padding: 0 14px 0 12px; font-size: var(--step--1); font-weight: 600; }
.ff-ico { width: 15px; height: 15px; flex: none; }
.ffacet.on .ff-ico { fill: currentColor; fill-opacity: 0.25; }
.ffacet.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.ff-x { border: 0; background: none; color: inherit; width: 28px; height: 28px; display: grid; place-items: center; margin-right: 2px; border-radius: 50%; opacity: 0.8; }
.ff-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.ff-x svg { width: 13px; height: 13px; }
.funnel.vert { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(7, minmax(60px, auto)); height: auto; gap: 3px; }
.funnel.vert .fseg { clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, calc(100% - var(--b)) 100%, var(--b) 100%); flex-direction: row; gap: 12px; padding: 12px 0; border-radius: 0; }
.funnel.vert .fseg:first-child { border-radius: var(--radius) var(--radius) 0 0; } .funnel.vert .fseg:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.funnel.vert .fseg .fs-n { font-size: var(--step-1); }
.funnel.vert .fseg .fs-dots { max-width: 30%; flex-wrap: nowrap; overflow: hidden; }
.funnel.vert .fseg .fs-dots i:nth-child(n+7) { display: none; }
@media (max-width: 700px) {
  .drawer.fdrawer { top: auto; left: 0; right: 0; width: 100%; max-height: 88vh; border-radius: var(--radius-card) var(--radius-card) 0 0; padding-right: 0; }
  .funnel.vert .fseg .fs-dots { display: none; }
}