@layer modules {
  .web-search-trace { display: flex; flex-direction: column; }
  .web-search-trace__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: 1.25rem var(--space-lg); }
  .web-search-trace__title { font-size: 1.375rem; line-height: 1.2; text-wrap: balance; }
  .web-search-trace__status { font-size: var(--text-sm); font-weight: 600; }

  .web-search-trace__body { display: flex; flex-direction: column; gap: var(--space-md); padding: 1.25rem var(--space-lg); border-top: var(--xf-border); }
  .web-search-trace__body:not(:has(*)) { display: none; }
  .web-search-trace__headline { font-size: 1.125rem; }
  .web-search-trace__empty { color: var(--xf-ink-soft); }

  .web-search-trace__bars { display: flex; flex-direction: column; gap: 0.875rem; }
  .web-search-trace__bar { display: block; width: 82%; }
  .web-search-trace__bar:nth-child(2) { width: 64%; }
  .web-search-trace__bar:nth-child(3) { width: 73%; }

  @media (min-width: 40rem) {
    .web-search-trace__title { font-size: 1.5rem; }
  }
}