/* Breakout radar: stacked refinements, search and sort under the view chips. */
.refine { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 14px 16px; background: var(--card); clip-path: var(--notch); }
.refine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.refine-h { flex: none; width: 76px; font-size: 13px; font-weight: 500; color: var(--muted); }
.refine-row label.refine-h + .rq { margin-right: 10px; }
.fchip.sm { height: 30px; padding: 0 10px; font-size: 13px; background: var(--raised); }
.fchip.sm:hover:not([aria-pressed="true"]) { background: var(--active); }
.rq, .rsort { height: 34px; border: 1px solid var(--control); border-radius: 8px; background: var(--frame); color: var(--text); font: inherit; font-size: 14px; }
.rq { width: min(300px, 100%); padding: 0 12px; }
.rsort { padding: 0 30px 0 10px; }
.refine-n { margin-left: auto; font-size: 13px; color: var(--muted); }
.refine-n b { color: var(--text); font-weight: 600; }
.refine-row .link-btn { margin-left: 8px; }
@media (max-width: 640px) {
  .refine { padding: 12px; }
  .refine-h { width: 100%; }
  .refine-n { margin-left: 0; width: 100%; }
}